0 votes
asked by (160 points)
@import url(//fonts.googleapis.com/css?family=Open+Sans);

body {
  font-family: 'Open Sans', sans-serif;

I put this in my story stylesheet but it doesn't work. Any help?

1 Answer

+1 vote
answered by (137k points)
selected by
Best answer

There are you mistakes in your example:

1. The URL to the hosted font is malformed.

If you access the @import tab of that font family selector on the Google Fonts site you will see that the relavent URL looks like the following;

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

... notice the quotes around the URL value and that it has a https: protocol 

2. You are targeting the body element with your font-family related rule.

If you Inspect the CSS being applied to the elements of the main page of your story you will discover that Harlowe assigns it's default to it's custom tw-story element so your CSS rule should like like the following.

tw-story {
  font-family: 'Open Sans', sans-serif;

If you place both of the above within your project's Story Stylesheet area, making sure that the @import statement comes before the tw-story based rule, then the font change will work.

commented by (160 points)
Hi again!

Could you please send me the code for this font?

This is for a school project and want to make it perfect: https://fonts.google.com/specimen/Jua
commented by (137k points)
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.