Сhange the font in Twine

Authoring Twine
2

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! :slight_smile:

2 Likes