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

1 Answer

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

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

by (330 points)

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.

 

by (68.6k points)
edited by

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;

 

by (330 points)
Thanks a ton. That works much better now. I fixed the generic fall back too.
by (330 points)
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?
by (68.6k points)

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

 

...