Harlowe: thinking outside the (box:)

Authoring Twine
,
6

▲ Return to the Table of Contents

Embedding Fonts

  • The fonts in your story give it personality.
  • Variable weight fonts are the best for controlling legibility and are much smaller in file size as it’s a dynamic font (instead of multiple stand-alone fonts).
  • Make sure the font is licensed appropriately for use in your project.
  • Sites, such as Google Fonts and Fontshare, are great places to find fonts.

Note: Notepad++ is used in this example to extract the font data for CSS with the TrueType format as the focus.

  1. ) Launch Notepad++, open a new file and paste the following template into the file:
@font-face {
    font-family: ">>>NAME<<<";
    src: url(data:font/truetype;charset=utf-8;base64,>>>BASE64<<<) format("truetype");
    font-style: normal;
}
  1. ) Find a font you want to use and open the file in Notepad++ (I chose Lora and it’s a TrueType font – Lora-VariableFont_wght.ttf).
  2. ) Select all of the font data (Ctrl+A) and use the menu options: Plugins > MIME Tools > Base64 Encode
  3. ) The data will become one long string. Select all the data and copy it.
  4. ) Go back to your file that you first created (with the CSS font template above) and select the >>>BASE64<<< portion and paste the font data over top of it. (Note: You may need to change the format("truetype") parameter if using a different format.)
  5. ) Change the >>>NAME<<< portion to whatever you want to (“Lora - Variable”, in this case).
  6. ) Save this new file as a .CSS (lora-variable.css) in the same directory as your Twine story file.

Now you can add one line of code to the top of your story style sheet in Twine…

@import "lora-variable.css";

…and reference it in your story CSS as font-family: "Lora - Variable", sans-serif; (I use sans-serif as a fallback to tell if the font has any problem rendering – Lora is a serif font.)

》Tip: Some fonts look great, but don’t read well as body text. These fonts can still be used for headers, buttons or game title fonts.

Extending Embedded Fonts :

In the example above, it so happens that the Lora font has a separate file for italics (Lora-Italic-VariableFont_wght.ttf). We’ll want to do the same thing again with the italic variable font. Your .CSS font file should look like this:

@font-face {
    font-family: "Lora - Variable";
    src: url(data:font/truetype;charset=utf-8;base64,[BASE64 DATA]) format("truetype");
    font-style: normal;
}
@font-face {
    font-family: "Lora - Variable";
    src: url(data:font/truetype;charset=utf-8;base64,[BASE64 ITALIC DATA]) format("truetype");
    font-style: italic;
}

…and now when you use * , // , <i> or <em> within your passages, the italic version will display properly.

Note: The font-family value is the same for both @font-faces, but the font-style is different.

The only thing left to account for is bold font variations when using ** , '' , <b> or <strong>. This is accomplished with the following CSS in your Twine story’s style sheet…

strong, b { font-variation-settings: "wght" 700; }

Lora has a font weight ranging from 400 to 700. You can control the weight to any number within that range in multiple CSS styles. Other fonts can start much thinner and work their way to much heavier numbers.

》Tip: When displaying light coloured fonts on dark backgrounds, font weight is extremely important. The darker (or more discreet) the font, the more weight it typically needs to show up clearly. With brighter fonts, less weight is required. This is why I encourage variable weight fonts for body text.

Using multiple font style and weight files (non-variable font families) :

Each weight needs it’s own font-family name, such as “Times - Regular” and “Times - Bold”. However, you can still share an italic version with the same names. When you setup your CSS you might want to do something like this…

tw-story { font-family: "Times - Regular"; }
strong, b { font-family: "Times - Bold"; }

Note: This approach is untested by myself. I use variable weight fonts or static fonts (no variations). I might test this one day and update it as necessary. If others are aware of a better strategy, let me know.

》Bonus Tip: Some fonts almost look good enough to use, but appear too bunched or spread out. You still might be able to use the font by adjusting the kerning (spacing between letters). Use letter-spacing and word-spacing CSS styles to see if the text becomes easier to read. (I had to use it for the Lora font, in conjunction with font-variation-settings: "wght".)

Rationale :

  • Embedding a font ensures that it’s always available to your story.
  • Your fonts will work when a user is offline.
  • You are not limited to fonts installed on the user’s device.
  • Advanced authors can embed their own custom fonts.

▲ Return to the Table of Contents