The easiest fonts to use are the ones everyone already has. A list of common font families that are pretty safe to use is at: <a href="http://www.cssfontstack.com/" target="_blank">http://www.cssfontstack.com/</a>
The next easiest fonts to use are the ones that are importable with a simple command. If you can find a free font you like in Google Fonts or Adobe Edge or if you buy a font from a company who will give you an import URL, and if your Twine is going to run in a browser with internet access, then you can:
[[Import a Font]]
Instead of importing from a URL, you can:
[[Embed a font in your style sheet]]
And finally, whether you are using a default, imported, or embedded font, you will want to:
[[Use fonts]]
If you can find a font you like on Google fonts
<a href="https://fonts.google.com/" target="_blank">https://fonts.google.com/</a>
For example: <font face="Pacifico">Pacifico</font>, <font face="Indie Flower">Indie Flower</font> or <font face="Coiny">Coiny</font>
In Twine, Edit Story Stylesheet, add a line like:
`import url(https://fonts.googleapis.com/css?family=Coiny);`
Google Fonts can give you the exact line you need if you select the font, open the little popup, and click @IMPORT.
Adobe Edge also has a collection of fonts that can be easily imported this same way:
<a href="https://edgewebfonts.adobe.com/fonts" target="_blank">https://edgewebfonts.adobe.com/fonts</a>
[[Use fonts]]
First, find the font you want to use. For example, visit:
<a href="https://www.fontsquirrel.com/" target="_blank">https://www.fontsquirrel.com/</a> and make sure you turn on the "Webfont" filter in the right sidebar under LICENSES.
`Download a font. If downloading from fontsquirrel.com, first make sure you are on the page for your font. If you still see samples of different fonts, click on the sample of your font to open that font's page. Choose "Webfont Kit" under the name of the font. Choose WOFF format. (Depending on which devices you want to support, you might need to choose different formats.) After downloading and unzipping, you will have one or more font files (for example *.ttf and/or *.woff)
If you do not have a *.woff version of your font yet, you can use fontsquirrel.com to convert it using the Generator link at the top of their page.
You might have more than one *.woff file. Choose one of them for the following steps. If you are going to need more than one of them, repeat the following steps for each.`
Next, convert your woff file to base 64. One way to do is is to visit:
<a href="https://www.giftofspeed.com/base64-encoder/">https://www.giftofspeed.com/base64-encoder/</a> and choose a file: browse to and open your *.woff file. Do the next step below before copying the generated string.
in Twine, go to "Edit Story Stylesheet" and copy the following text into it:
`@font-face{font-family:'FFFF'; src: url(data:application/font-woff;charset=utf-8;base64,BASE-64-STRING-HERE) format('woff');}`
Replace FFFF with the name you want to use in your project to refer to this font family. (I recommend a short name with no spaces.)
Copy the whole string created by the base64 encoder. This can be copied easily by pressing the SELECT ALL button, then copy. Select BASE-64-STRING-HERE and paste to replace it.
<font face="AT">This is a custom font<font size=16> now in 16-point type</font></font>
[[Use fonts]]
Using fonts works the same way whether you have imported or embedded them.
If you want to use a font as the default for all passages, then in the story stylesheet include a section like the following. Make sure this comes after where the font it uses has be imported or embedded:
<code>`html {
font-family: Coiny;
}`</code>
Instead of html, there will be a variety of possible tags if you want to style just some parts of the story. In Harlowe, the tags I know are tw-story, tw-passage, tw-link, tw-link.visited, and tw-sidebar.
If you just want to directly choose to use a font for a portion of a passage, you can use the font tag:
<code>`We do not have to import or include web-safe font families such as
<font face="Courier">Courier</font> or
<font face="Arial">Arial</font> or
<font face="Times">Times</font>.</font>`</code>
We do not have to import or include web-safe font families such as
<font face="Courier">Courier</font> or
<font face="Arial">Arial</font> or
<font face="Times">Times</font>.</font>
<code>`She said <font face="AT">This is a custom font <font size=16>Bigger</font> smaller</font> and then she was quiet again.`</code>
She said <font face="AT">This is a custom font<font size=16> Bigger</font> smaller</font> and then she was quiet again.
<code>`Multiple fonts in one sentence:
<font face="Pacifico">Pacifico</font>,
<font face="Indie Flower">Indie Flower</font>,
<font face="Comfortaa">Comfortaa</font> and
<font face="Coiny">Coiny.</font>`</code>
Multiple fonts in one sentence: <font face="Pacifico">Pacifico</font>, <font face="Indie Flower">Indie Flower</font>, <font face="Comfortaa">Comfortaa</font> and <font face="Coiny">Coiny.</font>