Loading either the online or offline version of a font

Comments

• greyelf

  August 2016

  I tested loading a local copy of the font Quantico using SugarCube 2.7.2 and it worked correctly in Chrome.
  
  The steps I followed:
  
  1. Created a local folder named mystory, within that folder I created a sub-folder named Fonts
  
  2. Downloaded the quantico.zip file and extracted the Quantico-Regular.ttf file into the new Fonts sub-folder.
  
  3. Created a new Story Project within Twine 2, changed it's story format to SugarCube 2.7.2, and added the following CSS to the story's Story Stylesheet area.

  @font-face {
  	font-family: 'Quantico_off';
  	src: url('Fonts/Quantico-Regular.ttf');
  }
  
  .quant {
  	font-family: 'Quantico_off';
  }
  

  4. Added the following markup to the story's main passage.

  @
  

  5. Used the Publish to File option to created a Story HTML file which I saved within the new mystory folder, I then opened that Story HTML file using Chrome.
• TheMadExile

  August 2016 edited August 2016

  dtraposo wrote: »

  @import 'https://fonts.googleapis.com/css?family=Quantico';
  html {
  	font-family: Arial;
  	font-family: 'Quantico', sans-serif;
  }
  

  Issue #1: You're specifying the font-family property multiple times in a rule. Do not do that. Your second use of font-family overwrites the first. You should have at most one font-family per rule.
  

  dtraposo wrote: »

  Now for the offline version, I'm trying to load in the local version of the Quantico font (located at Fonts/Quantico-Regular.ttf, relative to my game file) like so:

  @font-face {
  	font-family: 'Quantico_off', sans-serif;
  	src: url('Fonts/Quantico-Regular.ttf') format('ttf');
  }
  

  I'm naming it "Quantico_off" so as to properly differentiate it from the online version of the font being loaded from Google Fonts. However, when I go offline to make sure it's working properly (i.e., not loading the online version instead), it never works. It only seems to default to Arial. Is there any way to successfully do this?

  Issue #2: You're specifying multiple values to the font-family property in a @font-face rule. Do not do that. In a @font-face rule, the font-family property is used to define the name of the font face, so you should specify only that. It's only in normal CSS rules that you may specify multiple values to font-family.
  
  Issue #3: You've specified an invalid value to the format() hint—i.e. ttf is not defined within the specification. The proper format hint for a TrueType font is format('truetype'). Quantico is an OpenType font, however, so if you're going to specify a format hint at all, then you should probably be specific and use format('opentype')—though format('truetype') will also work, since OpenType is a superset of TrueType.
  
  That said, I'd omit the format hint in this particular case. Format hints are mostly used by browsers to prioritize the downloading of font resources or, if the format is unsupported, not downloading them. Since you're including the font as a local file, there's no downloading to be done and thus no pressing reason to include the hint.
  
  
  I'd suggest something like the following: (at-rules go at the top of your CSS)

  @import url('https://fonts.googleapis.com/css?family=Quantico');
  @font-face {
  	font-family: 'Quantico_off';
  	font-style: normal;
  	font-weight: 400;
  	src: url('Fonts/Quantico-Regular.ttf');
  }
  
  html {
  	font-family: 'Quantico', 'Quantico_off', Arial, sans-serif;
  }
  

  
  Though, that is somewhat wasteful of network resources. It would be better to have two separate builds, one for your website and one for download. For example, the website build:

  @import url('https://fonts.googleapis.com/css?family=Quantico');
  
  html {
  	font-family: 'Quantico', Arial, sans-serif;
  }
  

  And the downloadable build:

  @font-face {
  	font-family: 'Quantico';
  	font-style: normal;
  	font-weight: 400;
  	src: url('Fonts/Quantico-Regular.ttf');
  }
  
  html {
  	font-family: 'Quantico', Arial, sans-serif;
  }
  

  
  Ideally, you could sort of combine the two into one @font-face rule and get the best of both, but Google doesn't give out safe URLs to their actual font resources—just the @import URLs.