What is up with the CSS font in Twine 2.2 with Harlowe?

Question

I keep trying to use custom (but web safe) fonts and all I'm getting is Comic Sans and it is driving me nuts.

Answer 1

Without an example of your custom CSS it is difficult to know exactly why it is not working as you want it to.

Harlowe 2.x defines it's default font-family using a CSS selector that targets the tw-story element like so.

tw-story {
	font-family: "Georgia", "serif";
}

... so if you want your custom font-family to override the default then you need to add CSS to your story's Story Stylesheet area that targets the same tw-story element.

note: It is a good idea to always include a font hierarchy that ends in a generic family in case the desired font doesn't load or isn't available.

eg. font-family: "Diskontented", "Arial", "Sans-serif";

Comments

My stylesheet roughly looks like this right now:

@font-face {
  font-family: "Acme";
  src: url('https://fonts.googleapis.com/css?family=Acme');
}

p {
  font-family: "Acme";
}

#title {
  text-align: center;
  vertical-align: center;
  horizontal-align: center;
  font-family: "Acme";
  font-size: 30px;
}

#box {
  float: right;
  width: 200px;
  padding: 15px;
  border: solid;
  border-width: 3px;
  border-radius: 0px;
  font-family: "Acme";
  font-size: 22px;
}

#content {
  float: center;
  width: 640px;
  font-family: "Acme";
  font-size: 22px;
}

and the first passage (I haven't gotten far yet) looks like this to test out if the font works:

{<span id="title">(print:"Dragon's Hearth")</span>}
{<span id="subtitle">(link: "Press here to start")[(goto:"Name")]</span>}
{<span id="box">Test</span>}

and it always shows up with a times new roman font/not centered.

 

---

You're attempting to import the font from Google via CSS incorrectly.  Replace your current @font-face rule with something like the following: (n.b. @import rules must come first in your stylesheet)

@import url('https://fonts.googleapis.com/css?family=Acme');

 

The reason why your current rule didn't work is because a @font-face rule's src property must be a data URI or a URL to an actual font resource (i.e. an actual font file; e.g. true/open type font, woff/woff2 font, etc).  What's returned by the URL https://fonts.googleapis.com/css?family=Acme, on the other hand, is itself a stylesheet consisting of a @font-face rule, not the font resource itself, which is why you must import it.

 

PS: Also.  As suggested by both greyelf and Google, you should be supplying one of the generic fallback font classes in your font-family properties.  In particular for Acme, Google suggests:

font-family: 'Acme', sans-serif;

 

---

Thanks a ton. That works much better now. I fixed the generic fall back too.

---

Can you import more than one font to use? Say I want to use one for the title and a different one for the text. Is it possible?

---

Yes.  Simply specify additional @import rules at the top.  For example:

@import url('https://fonts.googleapis.com/css?family=Acme');
@import url('https://fonts.googleapis.com/css?family=Alegreya');

Then use the appropriate values for the font-family in your style rules.  For example:

#title {
	font-family: 'Acme', sans-serif;
	font-size: 30px;
}

#content {
	font-family: 'Alegreya', serif;
	font-size: 22px;
}