Today on Lobsters I found a link to Kev Quirk's blog post How to self-host your web fonts. For the last nine years I've been using Google's font-hosting service, which whilst very convenient, carried some privacy concerns (which Joey Hess originally brought to my attention) and (it turns out) does not appear to have been faster, in network terms, than bundling what I was using locally. This is something I've been meaning to get around to doing for almost that long.

Comments

Atom
comment 1
Do note that by self-hosting webfonts, you're making it harder to block them (https://github.com/ryanbr/fanboy-adblock/blob/master/fanboy-antifonts.txt) and thus you're making your website less accessible.
Comment by Tomáš Janoušek,
comment 2

That's an interesting take, thanks for sharing. If I understand correctly, for some people there's an accessibility argument to override the font choice of the website author. One technique to achieve this it to block access to external font APIs via Adblock or similar. By moving the fonts local, we prevent that approach from working.

This sounds to me a little like an "if all you have is a hammer, everything is a nail" problem. If you want to override web fonts, you can do so more reliably using browser settings. For example Firefox has a tick-box "Allow pages to choose their own fonts, instead of your selections above" that you can untick.

jon,
comment 3

It’s entirely possible to also choose Free fonts (ideally with a licence suitable for embedding, such as SIL OFLv1.1 or GPL with font exception, not Apache 2) and do the conversion using Free tools (there’s ttf2eot (in MirPorts, can’t find it in Debian atm) for old IE support, Debian has woff2 which converts the TTF fonts to WOFF2 for modern browsers, and anything in between can use the TTFs directly, no need for WOFF version 1 in practice any more). Incidentally, I’ve just added WOFF2 to the MirBSD website…

CSS looks like this then:

@font-face {
    font-family:"Gentium";
    font-style:normal;
    font-weight:normal;
    src:url("FNT/GenR102.eot");
    src:local("Gentium Regular"),
        local("Gentium"),
        local("Gentium Basic Regular"),
        local("Gentium Basic"),
        local("Gentium Book Basic Regular"),
        local("Gentium Book Basic"),
        url("FNT/GenR102.eot?#iefix") format("embedded-opentype"),
        url("FNT/GenR102.woff2") format("woff2"),
        url("FNT/GenR102.ttf") format("truetype");
    font-display:swap;
}

Do this once per file. “local” has possible names of the font when locally installed (it’ll skip the download then), the .eot shows up twice (yeah, legacy…) and everything else uses the rest. If you don’t care about IE: (using bold/italic as example so you see what has to change for the files)

@font-face {
    font-family:"Gentium";
    font-style:italic;
    font-weight:bold;
    src:local("Gentium Bold Italic"),
        local("Gentium Basic Bold Italic"),
        local("Gentium Basic"),
        local("Gentium Book Basic Bold Italic"),
        local("Gentium Book Basic"),
        url("FNT/GenBasBI.woff2") format("woff2"),
        url("FNT/GenBasBI.ttf") format("truetype");
    font-display:swap;
}
Comment by mirabilos,

✏ comment on this page (Help on commenting) ⏳