Matt

Today I checked off a long-standing task for Write.as: self-hosting our fonts. Back in September, Ghostery started blocking Typekit/Google's Web Font Loader. But I also didn't want to depend on a third party for these key design components.

This is how I did it:

1. Using google-webfonts-helper, I downloaded Lora and Open Sans — the font faces we use on Write.as — and added them to a new fonts folder.
2. I added the CSS from that tool to a new CSS file on Write.as (fonts.css).
3. I grabbed webfontloader.js from Typekit's GitHub.
4. I changed two lines on pages where we loaded fonts:

In WebFontConfig:

google: { families: [ 'Lora:400,700:latin' ] }

became

custom: { 
    families: [ 'Lora:400,700:latin' ], 
    urls: [ '/css/fonts.css' ] 
}

In the loader code, wf.src = ... changed to wf.src = '/js/webfont.js';

And that's it!