Adding externally hosted custom fonts?

mochacream · October 2016

I tried a code set mentions below, but it doesnt seem to work for sugarcube, or it bugs in a way I'm not proficient enough yet to figure out?

I have a few, and I want to some outside the main body for dramatic effect, so if anyone could help me figure out how to do this, I'd be super grateful.

here's the code i tried to use http://pastebin.com/nbhAKNDY and inserted on top of body

TheMadExile · October 2016

The code you linked to is CSS and should be placed within the Story Stylesheet. Also note, all @font-face rules must go at the top of the Story Stylesheet.

@font-face {
	font-family: 'Indie Flower';
	font-style: normal;
	font-weight: 400;
	src: local('Indie Flower'), local('IndieFlower'), url(http://fonts.gstatic.com/s/indieflower/v7/10JVD_humAd5zP2yrFqw6ugdm0LZdjqr5-oayXSOefg.woff2) format('woff2'), url(http://fonts.gstatic.com/s/indieflower/v7/10JVD_humAd5zP2yrFqw6nhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

Beyond that, and unlike SugarCube v2, SugarCube v1 places its core font stack setting on the <body> element, so to replace the default you need to do something like the following (after all @font-face rules):

body {
	font-family: 'Indie Flower', cursive;
}

That will replace the font stack for most all text.

If you only wanted to apply your custom font stack to the main passage display, then you'd do something like the following instead (again, after all @font-face rules):

#passages {
	font-family: 'Indie Flower', cursive;
}

mochacream · October 2016

How would I stack the multiple fonts/use them within the CSS stylesheet? I tried putting the second code just under the first @font-face and input the second font under the h1 section, but it didn't work.

how would i get around that?

TheMadExile · October 2016

What "h1 section"? Are you attempting to edit the compiled file or something similar?

mochacream · October 2016

no no for the first header, i mean. the font works when i put it in 'body', but some passages will use two fonts, and the title screen will have a different one? so i was wondering how i could use them interchangeably.
if it comes to it, do i just arrange the coding in the passage itself? would i have to remove the font-family in 'body' to do it? if so, how would i set up the in-passage code?

sorry it's a lot of questions aha...

Howdy, Stranger!

Categories

Adding externally hosted custom fonts?

Comments