Twine 2 fonts

rapix

I read the Current QNA things about twine, and I don't really thinks its updated, I just wanted to know how to import a font in twine 2.0.
Twine 2 is very different anyways...

Sage

You can either use:

http://twinery.org/forum/discussion/3042/how-can-i-import-a-non-google-font/p1

or

@import url(https://fonts.googleapis.com/css?family=Press+Start+2P)

or

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

or

search the forums for the word "fonts" because often times someone has asked this question before and may have a better solution for you.

Claretta

The normal @font-face method in the css passage will work. You can find info on @font-face in css tutorials around the web.

Sage

Wow! Thanks. I didn't know that one @Claretta. I just checked it out at TreeHouse... it's easy, too. thanks again.

rapix

Thanks guys!

rapix

@Sage, Just a quick question, where would I put this code (@import url(https://fonts.googleapis.com/css?family=Press+Start+2P)) ??? I'm a beginner in twine.

TheMadExile

At the very top of your project's Story Stylesheet.

rapix

@TheMadExile, Thanks!

rapix

It still won't work...I'm sorry, but I'm a beginner in html and twine, I think i just might stop using twine, just continue html. Sorry for bothering you guys

TheMadExile

Note that the @import rule only requests that the font be imported. You still have to actually use the font.

A complete Harlowe example would be something like the following (goes in Story Stylesheet):

/* All @import rules must go at the top of the Story Stylesheet. */
@import url(https://fonts.googleapis.com/css?family=Press+Start+2P);

/* Using the font. */
tw-story {
	font-family: 'Press Start 2P';
}

A complete Snowman example would be something like the following (goes in Story Stylesheet):

/* All @import rules must go at the top of the Story Stylesheet. */
@import url(https://fonts.googleapis.com/css?family=Press+Start+2P);

/* Using the font (only changes the passage text). */
#passage {
	font-family: 'Press Start 2P';
}

A complete SugarCube example would be something like the following (goes in Story Stylesheet):

/* All @import rules must go at the top of the Story Stylesheet. */
@import url(https://fonts.googleapis.com/css?family=Press+Start+2P);

/* Using the font (only changes the passage text). */
#passages {
	font-family: 'Press Start 2P';
}