How to self host Google Fonts

Bored with using regular fonts for my website, I finally decided to try web fonts. Google Fonts seems to be the preferred choice of web fonts since it has more than 1500 open-source fonts. I did not want every load of my webpages to pull in the font file from Google servers, so I looked for a way to self host the font files.

Many of the Google fonts are available in TTF format. These files are large and the recommended lightweight file format for website is apparently Web Open Font Format 2.0 (WOFF2).

I found the website Google Webfonts Helper, created by Mario Ranftl, to be a one-stop resource for self-hosting Google fonts. I can pick a font and select charsets and styles to view how the font rendering looks. For the selected styles, it gave me the font-face definition CSS that I would need to add to my CSS file. Furthermore, it also provides a download of the .woff2 font files for the chosen charsets and styles.

Self-hosting these web fonts was easy with the Google Webfonts Helper:

• Choose the font, charsets and styles for which you need the WOFF2 files.
• Copy the CSS font face definition to your CSS file.
• In your CSS formatting, use the new font name.
• Download the WOFF2 files and place them in fonts/ directory of your website.
• Upload the new CSS file and the font files to your website and the newly rendered webpage should be using them.