(Harlowe) How Do I Change The Font?

Deadshot

I know I can use macros, but they only have some fonts. I would like to use the fonts from Google Fonts, and I have watched this video:



However, I have copied and pasted all the code (Import AND Integrate) yet it doesn't work for me.

greyelf

Could you supply an example of what the final CSS within your Story Stylesheet area looked like, so we can see if there is an error in it.

Deadshot

Sorry, I deleted it once I found it didn't work. I'll find it in a minute.

Deadshot

Here's what I copied from the @import bit:

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

And here's what I put into the Stylesheet from the Integrate:

tw-passage:
{
font-family: 'Lora', serif;
color: white;
}

The font's called 'Lora'.

P.S.: I have a black background.

Deadshot

I have no idea why some of that text is blue.

greyelf

The reason some parts your example appears blue is because those parts are being interpreted by the software the forum uses.
Normally you should use the C button in the Comment field's toolbar to wrap your code examples in code tags but because your example includes an URL the forum software will display it incorrectly so you should use the quote button instead.

There is one error and one potential issue in your example, the error is that you have a colon directly after the tw-passage selector, the minor issue is that it is safer to wrap the parameter of the url() function in quotes.

The following is a corrected version of your sample, wrapped in quote tags:

@import url("https://fonts.googleapis.com/css?family=Lora";

tw-passage {
font-family: 'Lora', serif;
color: white;
}

note: Harlowe actually sets the default font and (fore-ground) colour using a html selector, not a tw-passage selector.

@import url("https://fonts.googleapis.com/css?family=Lora";

html {
font-family: 'Lora', serif;
color: white;
}

Deadshot

I'll check if this works.

Deadshot

Sorry but this still didn't work. I copied the code in the bottom box, or did you mean to copy the code in the top one?

Deadshot

Oh, and with the C button did you mean like this:

(set: $pizza to "awesome")

Deadshot

Oh, cool.

Thanks.

greyelf

Deadshot wrote: »

Sorry but this still didn't work. I copied the code in the bottom box, or did you mean to copy the code in the top one?

I just retested the code in both of the boxes within a new Harlowe based story, and they both change the font to Lora and the (fore-ground) colour to white.

You are place the CSS within your story's Story Stylesheet area?
And the CSS is at the start of the area before all other CSS with no blank lines between the start of the area and the @import line?

Deadshot

greyelf wrote: »

Deadshot wrote: »

Sorry but this still didn't work. I copied the code in the bottom box, or did you mean to copy the code in the top one?

I just retested the code in both of the boxes within a new Harlowe based story, and they both change the font to Lora and the (fore-ground) colour to white.

You are place the CSS within your story's Story Stylesheet area?
And the CSS is at the start of the area before all other CSS with no blank lines between the start of the area and the @import line?

Thank you very much. I've been trying to get this to work for ages!