[Harlowe] Custom Font?

Chalk

Hey,

I'd like to use a custom font for my story, but I can't figure out how to do it at all. Twine 1 had a really easy import font function, which Twine 2 seems to be lacking. Is there any way to use a custom font in Harlowe?

greyelf

I am going to assume that when you say "Custom Font" you mean one that is not already installed on the Reader's local machine.

One way to do what you want is to use the CSS import at-rule to import a custom font, the rule needs to be placed at the TOP of your Story Stylesheet.

eg. Import the Lobster font from Google Fonts

@import url(https://fonts.googleapis.com/css?family=Lobster);

... then add the following CSS rule to make Lobster the default font for your story

html {
	font-family: 'Lobster', cursive;
}

note: I used Google Fonts in the example for convenience sake, where you obtain your custom font from is up to you.

Chalk

I was more thinking a font from another website, say dafont.com

My game isn't run in a browser, it's run as an .exe so I'm curious if there's a way that I could package the font with the webkit and the html story file, or if there's another way I could use @import or another command on a dafont.com font.

sharonhuston

If it's a normal TrueType or OpenType font, then no. You could possibly include the font file, but your game players would have to install the font on their computers in order to see the font, just like you have to install the fonts to use them on your system. Your only alternative is to make a graphic using the fonts, and include the graphic in your Twine. Depending on how much you plan to use the font this may/may not be feasible.

greyelf

This css-tricks article talks about way to include external (hosted and local file) fonts in a web page, the CSS based solutions should work in the Story Stylesheet area.

The parameter of URL function in the CSS can also be a base64 encoded string version of the font file, an you can a website like this one to generate the string. If you click on the Usage of Base64 in CSS link on that website it will show examples of how to use the string with the font-face at-rule.

Chalk

Thanks greyelf! My saviour as always.