+1 vote
by (2.2k points)
edited by

The transition that I'm using that makes the font not work. I'm using the typed transition. Can someone please tell me how I can get both to work?

Edit: sorry, didn't include my css

.passage {
  width: 80%;
  letter-spacing: 0.1em;
  font-family: 'VT323', monospace;


1 Answer

0 votes
by (156k points)
selected by
Best answer

note: When asking questions about why a particular piece of code or CSS doesn't work it helps if you supply an example of that code so that the person answering can determine whats wrong, and so they don't have to guess what your existing code/CSS is doing.

SugarCube 2 sets it's default font related information on the html element like so.

html {
    font: 16px/1 Helmet,Freesans,sans-serif;

So the simplest way to overwrite it is either to assign your replacement font information against the same element if you want it to effect the whole page, or against the .passage classed div element if you only want to effect the passage area. The CSS needs to be placed within your story's Story Stylesheet area.

html {
	font-family: Courier;

.passage {
	font-family: Ariel;


EDIT: One of the steps of installing the SugarCube 2 typed.js integration module is to add specific CSS to your Story Stylesheet area, the first CSS sector in that CSS assigns a font-family to the text that will be effected by the typed system. To change the font used simply overwrite the existing font names.

.typed, .typed-cursor {
	font-family: Courier, monospace;


by (2.2k points)
Sorry, I've included my css of the .passage in the original question.

I added the html with the font I want and it still doesn't work.
by (2.2k points)
Turns out you gotta add the font family to the transition in the style sheet. Sorry for taking up your time, thanks for your help.
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.