font not working because of typed transition

Question

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 {
  position:relative;
  width: 80%;
  font-size:1.3em;
  letter-spacing: 0.1em;
  font-family: 'VT323', monospace;
}

 

Answer 1

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;
}

 

Comments

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.

---

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.