0 votes
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
by (63.1k 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).

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?

by (23.6k points)

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

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

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

by (159k 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>

 

by (63.1k 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.
by (1.2k points)

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

by (63.1k 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. 

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.
by (159k points)

admendment:

One potential reason for choosing to use Base64 embedding of the font instead of using a Relative reference Font file is to get around the fact that some modern web-browser's will now issue a Cross Origin Resource Sharing (CORS) policy warning when trying to access a font that is being stored relative to a locally viewed HTML file.

0 votes
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.

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...
...