Twine Version: 2
Story Format: Sugarcube 2
Hello. How to change the font in Twine?
I’ve already tried this:
@import url('https://fonts.googleapis.com/css?family=Work+Sans')
and this:
@font-face {
font-family: my-font;
src: url("fonts/my-font.otf");
}
Thank you in advance for your help!
The answer depends on where you want to change the font.
For example, if you want that font to just affect your passages, then you could do:
@import url('https://fonts.googleapis.com/css?family=Work+Sans');
.passage {
font-family: "Work Sans";
}
or, if the font file is local, you could do something like this:
@font-face {
/* Font source: http://sensi.org/~svo/glasstty/ */
font-display: swap;
font-family: Glass;
src: url("font/Glass_TTY_VT220.eot");
src: url("font/Glass_TTY_VT220.eot?#iefix") format("embedded-opentype"),
url("font/Glass_TTY_VT220.woff2") format("woff2"),
url("font/Glass_TTY_VT220.woff") format("woff"),
url("font/Glass_TTY_VT220.svg#Glass_TTY_VT220") format("svg"),
url("font/Glass_TTY_VT220.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
.passage {
font-family: Glass, monospace;
}
That shows how to support multiple font types, and uses the “monospace” font as a fallback if the “Glass” font doesn’t work.
You can further modify how the font is displayed by doing things like this:
.passage {
color: #a3ff99;
text-shadow: 0px 0px 20px #5dff4b;
font-family: Glass, monospace;
font-size: 20px;
line-height: 22px;
}
.passage a, .passage a:hover, .passage a:active {
color: #a3ff99;
text-shadow: 0px 0px 20px #5dff4b;
text-decoration: underline;
}
That adds various font and text effects, including changes to how links look. See the “Dumb Terminal” section of my Twine/SugarCube sample code collection to see how that looks.
I’d also recommend taking a look at my comment here for tips on how to target your custom CSS styling like that in the future, especially if you’d like to target places other than just the passages.
Hope that helps! 
Thanks! Love you.
Apparently, there is some problem with Russian fonts)
If you can point a link to the Russian font, then I could take a look at it and see what’s going on.
You’ll need to publish your game to HTML in the same directory as your “fonts” folder, and then open that HTML file for it to work, since that’s required for the path for the font file to be correct.
I downloaded the fonts from the site you linked to and put them into a “fonts” folder. Then I did a test like I just described using this CSS, and it worked fine for me:
@font-face {
font-display: swap;
font-family: "AlumniSans-Regular";
src: url("fonts/AlumniSans-Regular.ttf") format("truetype");
}
.passage {
font-family: "AlumniSans-Regular";
}
#story {
font-size: 22px;
}
You can add additional “@font-face” rules if you want to add the other AlumniSans fonts as well. See the MDN @font-face documentation for details.
IMPORTANT: Make sure that the path and filename(s) in your code use the same capitalization as the actual path and filename(s), otherwise the code won’t work on most non-Windows operating systems.
If you want to make it also work from the “Play” button in the Twine editor, then you’d need to hardcode the whole path to the font, like this:
@font-face {
font-display: swap;
font-family: "AlumniSans-Regular";
src: url("fonts/AlumniSans-Regular.ttf") format("truetype"),
url("file:///E:/Games/MyGame/fonts/AlumniSans-Regular.ttf") format("truetype");
}
.passage {
font-family: "AlumniSans-Regular";
}
#story {
font-size: 22px;
}
Just change the second URL to the file path on your computer. (Though, I’d recommend removing that part from your release version if you distribute it to other people, since that code will throw error messages to the console if the file isn’t found there.)
You may want to use the above code along with my “Font Size Buttons” code, since that will allow players to scale the text as needed.
Enjoy!
It worked! You’re cool! Thank you for helping the noobs in Twine 