0 votes
asked by (290 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
answered by (125k 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";

commented by (290 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.

 

commented by (58.8k 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;

 

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

 

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.
...