Self-hosting a woff2 Google font

Image: CC BY 4.0 by cybrkyd

As part of my blog revamp, I changed from the tried-and-tested ‘font-stacking’ method to self-hosting the fonts. My main reason for switching was that I began to notice how different browsers rendered the same webpages according to their engines.

I mainly use Firefox and so I do all my development in there. Upon opening Chromium recently to test something, I noticed how the font-size of my website was different…it looked much nicer and smoother in Chromium albeit a bit smaller in size.

It got me thinking: why this is? I finally understood that my font-stack was fairly generic.

font-family:sans-serif;

This results in each browser loading its default sans-serif font. Firefox on my Linux uses DejaVu Sans and Chromium lists theirs as “Customised”! OK, let’s control this one a bit more.

I tested a few fonts and eventually decided I wanted to use something with serifs, Baskerville. Google Fonts offers a similar one named Libre Baskerville.

Get woff2 files from Google Fonts

First, I clicked on ‘Get font’ then on ‘Get embed code’, both located on the right-hand side of the page. The link code and @import code can be toggled and either can be used. From the link code, I copied the URL located on the third line:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">

I pasted the entire URL into my browser:

https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap

I landed on a page which lists all the available .woff2 fonts for Libre Baskerville. This font is pretty basic and is only available in three styles: Regular 400, Regular 400 Italic and Bold 700. This is actually perfect for my needs. Next, I located the required fonts. I’m looking to use the Latin extended version as it offers more glyphs:

/* latin-ext */
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/librebaskerville/v14/kmKnZrc3Hgbbcjq75U4uslyuy4kn0qNXaxMICA.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

I copied the src url and pasted it into my browser and the file downloaded. I repeated the download for the remaining two files in the set. To know what each file is, I renamed the files from e.g. kmKnZrc3Hgbbcjq75U4uslyuy4kn0qNXaxMICA.woff2 to Baskerville.woff2 (for the regular font), Baskerville-italic.woff2 (for the italic file) and so on.

The @font-face shown above can be used as-is in the css file with the src url updated to point to the local file.

I like it! Looks like a book and is easy to read.