How to import a font

pinkbatgirl

How do I import a font please? The wiki refers to "the menu Story > Import Font" but I can't find a Story menu or any menu where this is an option. Can someone help please?

Wiki entry I'm referring to: http://twinery.org/wiki/frequently_asked_questions?s[]=font#how_do_i_import_a_new_font_from_my_local_computer

Sharpe

That advice is for Twine 1.4. I'm guessing you're using Twine 2 for two reasons. First, you're posting in the Twine 2 forum, and second, you can't find the story menu. If you're using Twine 1 and your eyes are open, you'll see the story menu at the top of the window. ;-)

Sorry, there is no import function in the Twine 2 user interface.

I wrote a guide for "importing" images into Twine 2 HTML files, and that applies for fonts as well, but my guide doesn't provide enough information to walk you through doing so step-by-step. Sorry, I've not the time nor even any Twine stuff on this computer, so I won't be able to help further.

You might try doing a search for how to use Google fonts.

pinkbatgirl

Thanks for the reply Sharpe - I'm not going mad not being able to find it then!

I'll have a go at importing the bits I'm using the font for as images instead then, that should work for what I'm using it for.
Thanks again for posting a reply, I was starting to go a little crazy!

Melyanna

This may not be useful if you need to use your own downloaded fonts, but if you can use google fonts, you can go to "edit story stylesheet" (hit the button with the story name in the upper left corner of the twine window), then put this on top of the Stylesheet:

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

(the bit after "family=" changes based on the font you need).
And this anywhere else in the stylesheet

.whateverclassyouneed {
	font-family: 'Rock Salt', cursive;
}

sudoradish

If I wanted this universally across all my story which class do I need?

Melyanna

You can just style html - example:

html {
    font-family: Verdana,Arial,sans-serif;
}

If you use Harlowe, you can chose other classes to style specific areas of the story.
(See this guide here: http://furkleindustries.com/fictions/twine/twine2_CSS_tutorial/ )

If you use other story formats, keep on mind that different formats use different selectors, so the guide above won't work.

1nKy

If you REEEEEAALLLY wanted to embed a font (or even image, for that matter) into your story file with twine2, then I suggest you look into converting those files into base64.

If you have no idea what I'm talking about, think about this
Binary is base 2. You have 0,1. (2 characters before we have to add a second column)
Our decimal counting system is base 10. We have 0,1,2,3,4,5,6,7,8,9.
Hexadecimal is 0-9,A-F. (16 characters total... If you translate 1100 from binary to hex, you get C)
base64 is a similar idea. Here is the number 42 for binary, decimal, hex, and base64, respectively: 101010, 42, 2A,q.
As you can see, the higher the base you go, the smaller your data is, but the less human readable it is.

In twine, converting from binary to base64, then using that data with js, css, and html has two benefits:
1) You can take data that ordinarily exists as a purely binary format and turn it into something browser/twine-readable.
2) You're seriously cutting down on the number of characters needed to represent a byte.

There are two drawbacks to this, though.
1) It's unweildly. If you use it in a twine passage, you're gonna have a tough time finding anything because all you'll see is a mishmash of characters that don't mean anything to humans, unless all the base64 code is at the end of the passage, which can be tricky.. This is a js file consisting of three base64-converted font files. https://raw.githubusercontent.com/bpampuch/pdfmake/master/build/vfs_fonts.js
3) Bloat. If you embed a lot of images, your output file's gonna get really big, really quick.
4) The stress it puts on Twine, as well as any dependent applications, like web browsers for the online version. I don't know how well Twine handles running this much stuff through it, but my guess is that it'll freeze up while it thinks. Your computer may even register it as not responding, which could scare you.
5) Overall Processor/memory load. This one's not as big a deal because modern machines are really good at doing a lot of things really fast, but it is worth pointing out.

I wouldn't recommend you use it for general use, because it can get really clunky really quickly, but it CAN be done. It also CAN be turned into a Javascript or CSS statement.

Vatavian

I just made a little tutorial about importing, embedding, and using fonts: http://www.philome.la/vatavian/import-and-embed-fonts-in-twine

Jud_Casper

Vatavian wrote: »

I just made a little tutorial about importing, embedding, and using fonts: http://www.philome.la/vatavian/import-and-embed-fonts-in-twine

I'm having problems with this tutorial. I'm using the import method and found my font on Google Fonts. I then follow the instructions for importing best I can (on the google site, I mean), but when I publish my game and test it in my browser the font doesn't apply.

Couple of things, if this because I'm using Sugarcube 2 then so be it, but I'm also not entirely clear on their instructions.

They give you two lines of code; a simple CSS for setting the font, and some more complex code for doing the importing. This latter line of code they say goes in the <head> of my html's document, but because I don't have access to this document I'm putting it at the top of my CSS sheet.

Any ideas?

TheMadExile

Google can supply you with either a <link> markup, which goes in the document <head>, or @import rule(s), which go in a stylesheet. You want the latter. All @import rule(s) must go at the top of your Story Stylesheet before anything else—many, though not all, @-rules share that requirement.

Google will show you the rules wrapped within <style></style> tags, discard the tags and use only the rules. Story formats insert the contents of your Story Stylesheet into a <style> element by default, so you simply want the CSS part. For example, Google will show you something like the following:

<style>
@import url('https://fonts.googleapis.com/css?family=Prociono|Shrikhand');
</style>

You only want to paste the following bit at the top of your Story Stylesheet:

@import url('https://fonts.googleapis.com/css?family=Prociono|Shrikhand');

Jud_Casper

Thanks, it was the <style> tags that threw me,