Loading your own fonts (and only the ones you're using)

Help Customization
1

If you want to use something other than the default fonts, there is a way to hack it in. Note that this requires a premium subscription, as you have to be able to add custom CSS.

Changing the font is relatively easy, but unless you know the font you’re using is installed on your reader’s computer, it won’t show up. You can use Google Fonts to embed a font, however. (Be aware that this does involve loading content from an external site, so you and your readers are subject to Google’s privacy policy on this.) Just pay attention to the full name of whichever font(s) you want to use.

Next, here’s what to add to the “Custom CSS” box on your customization page. Replace the words in quotes with the corresponding font name from Google Fonts (but don’t remove the quotation marks).

.norm h1, .norm h2, .norm h3, .norm h4, .norm h5, .norm h6, .norm p, .norm a {
    font-family: "Serif Font";
    
}

.sans h1, .sans h2, .sans h3, .sans h4, .sans h5, .sans h6, .sans p, .sans a {
    font-family: "Sans Serif Font";
    
}

.wrap h1, .wrap h2, .wrap h3, .wrap h4, .wrap h5, .wrap h6, .wrap p, .wrap a {
    font-family: "Monospace Font";
}

But there’s an additional step that’ll make your readers’ lives just a little easier: only embedding the fonts you’ll actually use. By skipping this, you’ll have to embed all 3 fonts (serif, sans, and mono) on every page, which means your reader will download all 3 even if only 1 is being used.

With that in mind, you can add the following code to the “Custom JavaScript” box on your customization page. Replace the placeholders with the names of the Google Fonts you’re using, and you’re good to go. If the font has more than one word, make sure to capitalize the first letter of each word. This will set the page to only load the font that is actually needs.

var fontType = document.getElementById("post-body").className;
var fontName = "";
var fontNameFixed = "";
var embedLink = "<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=";

// serif
if (fontType.search("norm") != -1 ) {
    fontName = "Serif Font";
} // sans
else if (fontType.search("sans") != -1) {
    fontName = "Sans Serif Font";
} // mono
else if (fontType.search("wrap") != -1) {
    fontName = "Monospace Font";
}

// google fonts uses '+' in the URL instead of space
fontNameFixed = fontName.replace(/\s+/g, "+");

embedLink += fontNameFixed + "\">";

document.write(embedLink);

What this code does is check the page to see what kind it is (i.e. whether it’s set to use serif, sans, or monospace), and then it inserts the correct embed link for that font only. There’s some delay for the font to download the first time, but that’s difficult to avoid as things are right now.

It’s a bit of a hack, but hopefully it’ll be useful unless and until an official method is implemented. Let me know if you have any issues!

5 Likes
2

Great solution! Quick question: the fonts on my site now flicker from the default to what I set really quickly when the page loads (even after previously having been loaded).

Is this normal?

3

It is. As I mentioned, this is kind of a hack :slightly_smiling_face:

From what I can tell, write.as loads its own stuff (CSS and JavaScript) first, and only then loads the custom code. Plus, the JavaScript that I used basically writes a new line of CSS to the page after it’s run (the embedLink variable), which in turn needs a page refresh to actually be used by the browser.

So yeah, it’s a trade-off. The alternative would be to use the CSS only, and then embed all 3 fonts in your custom CSS. The downside is that the user would have to download all 3 fonts even if they’re going to a page that only uses one, but the upside would be that once they do that, they wouldn’t have to download them again until their cache gets rid of the font. Plus it does allow mixing, say, serif and sans-serif fonts on the same page.