CSS issues with Harlowe (font-family)

davduf · May 2016

Dear all,

I really don't understand how to change my font under Harlowe

When i put this on my CSS

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

body {
font-size: 1.1em;
color: white;
background: white;
font-family: 'Electrolize', normal;
}

It does nothing.
If i change the format of my story to, let's say, SugarCube, it works !

But I'd like to keep the Harlowe format.

Any help ?

James_Purcell · May 2016

Body does not have a font value as it is just a container.
try targeting tw-passagedata

Also of not is that i'm getting issues with html not recognising single dashes in values and have to change them to double dashs.

davduf · May 2016

Great ! Thank you James!

greyelf · May 2016

@davduf
If you use your web-browser's Developer Tools to inspect the HTML of a Harlowe based story you will see that the tw-story element (Harlowe's main element) is not a child of the body element, which is different to most HTML files. This is why your CSS did not work correctly.

Harlowe sets it's default font information and fore-ground/back-ground colours on the html element, and then modifies the font-size on the tw-story element like so:

html {
	font: 100% Georgia, serif;
	background-color: transparent;
	color: #000;
}
tw-story {
	font-size: 1.5em;
}

Based on the above and Google fonts information about the Electrolize font your CSS should look something like the following.

note: Your original CSS sets white text on a white background, which means that the text will be invisible, so I changed the text colour to black in my example.

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

html {
	font: 100% 'Electrolize', sans-serif;
	background-color: white;
	color: #000;
}
tw-story {
	font-size: 1.1em;
}

davduf · May 2016

This is perfectif clear James_Purcell !
Thank you very much...

Now, I have to understand how to use header and footer :-)
Thx !

James_Purcell · May 2016

greyelf wrote: »
@davduf
If you use your web-browser's Developer Tools to inspect the HTML of a Harlowe based story you will see that the tw-story element (Harlowe's main element) is not a child of the body element, which is different to most HTML files. This is why your CSS did not work correctly.

Harlowe sets it's default font information and fore-ground/back-ground colours on the html element, and then modifies the font-size on the tw-story element like so:
html {
	font: 100% Georgia, serif;
	background-color: transparent;
	color: #000;
}
tw-story {
	font-size: 1.5em;
}
Based on the above and Google fonts information about the Electrolize font your CSS should look something like the following.

note: Your original CSS sets white text on a white background, which means that the text will be invisible, so I changed the text colour to black in my example.
@import url(https://fonts.googleapis.com/css?family=Electrolize);

html {
	font: 100% 'Electrolize', sans-serif;
	background-color: white;
	color: #000;
}
tw-story {
	font-size: 1.1em;
}

Thank you for better explaining it greyelf with an example.

Howdy, Stranger!

Categories

CSS issues with Harlowe (font-family)

Comments