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


#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!