0 votes
asked by (440 points)
I make a download of one Font from googlefont (i cant use directly to online, for play the story offline/ make app) How i import to twine the font of my computer?

2 Answers

+1 vote
answered by (58.4k points)
selected by
 
Best answer

You need to package it with your app/html file as an asset using a relative link.  So, if you had a folder called 'fonts' and a font name 'my-font.otf' in it, you're relative link would look like this (in your stylesheet):

@font-face {
    font-family: my-font;
    src: url("fonts/my-font.otf");
}

Then you'd use it by setting the font to 'my-font' in the above example (i.e., whatever the font-family property is set to).

commented by (440 points)

Thanks for answer...

I try this... but dont work (90% this is because of me), i am brazilian, english is not my first language, can u explain step by step?

I make download of font (Jura-Regular.ttf) and put in a folder near of story...

In stylesheet: i put this

@font-face {
    font-family: my-font;
    src: url("fonts/Jura-Regular.ttf");
}

 and in passage:

<div class="font-face"> Text </div>

anything wrong?

commented by (19.4k points)

As far as I know it needs to be a .woff file and convert it to  base 64.Take a look at this:

commented by (1.2k points)
I embed my fonts in my stylesheet as WOFF2 encoded in base64. Works a treat.
commented by (440 points)

I embed my fonts as woff encoded in base64. And wok very fine now... Thanks idling and Flamekebab...

commented by (127k points)

anything wrong?

 @Brugtz

You are trying to use the font-face @ rule as a CSS class when you should be defining a new class based selector that includes the new font-family and using that instead.

@font-face {
    font-family: Jura;    /* Name to use when referencing this font in your CSS. */
    src: url("fonts/Jura-Regular.ttf");
}

.warning {
    font-family: Jura;
}

... then assign the new CSS class to your div element like so.

<div class="warning"> Text </div>

 

commented by (58.4k points)
You don't need to use woff. You don't need to use base 64 (stop using base 64 for everything). Really, my example does work as is.
commented by (1.2k points)

But I hate having to manage a resource folder, Chapel! laugh

commented by (58.4k points)

Whatever floats your boat, I'm not gonna judge. Base64 is slow, bloated, and unnecessary though, so it falls short as a generic solution to every asset-related problem. 

Also, since the OP is making an app, they need to build an archive anyway. 

commented by (1.2k points)
It's a fair point. I do my best to keep any images I use it for small and only add fonts that I feel justify it. Similarly I use it for some really tiny audio clips.
0 votes
answered by (2.7k points)

There is no need to download it. Just add this to the top of your Story CSS:

@import url('https://fonts.googleapis.com/css?family=Work+Sans')

If you want to use Work Sans. Other fonts can be substituted as well. Don't even bother downloading, as this means that the font file will need to be uploaded to whatever site you want to share your story on.

commented by (440 points)
thansk for answer.

I understand this... i read in the cookbook of twine, but i go transform story to apk. archive i need the font stay with archive...
Welcome to Twine Q&A, where you can ask questions and receive answers from other members of the community.

You can also find hints and information on Twine on the official wiki and the old forums archive.

See a spam question? Flag it instead of downvoting. A question flagged enough times will automatically be hidden while moderators review it.
...