I subscribe to Noemi Stauffer's awesome Fresh Fonts newsletter and really enjoy all the new fonts and stories behind them. That's how I found Public Sans, a font created by the U.S. Government from their USWDS department.

Government Issued Fonts

Public Sans is a "A strong, neutral typeface for interfaces, text, and headings" and is "a fork of the SIL Open Licensed face Libre Franklin". Check out the github repo page for a detailed breakdown of the font and the changes made by the designers.

I use this font for this blog and I use every weight and style of the font-family, which comes out to about 18 font files. Yes, this is a bad practice and strongly advised against, but I've been getting into the web font world recently and decided to turn this into a learning challenge.

Optimizing with Font Tools

First up, we need to optimize our font files to reduce file size via subsetting and using WOFF and WOFF2 font files. Check out my blog about Web Font Tooling to set up your computer with the tools I'll be using below.

I'll be following the web font genius Zach Leat's guide for 2-stage font loading.

Public Sans comes with web font files, but I will be further optimizing them with pyftsubset. Here's a look at the True Type format file sizes for each style. There is a total of 18 fonts that add up to 1.2 Megabytes.

Here is the pyftsubset command for subsetting the font files. I ran this for each file.

All 18 files add up to 390 Kilobytes file size. The browser will determine which files to download, WOFF2 or WOFF.

2 Stage Loading

I'm using Zach Leats Web Font Loading Recipes for the font loading code with some modifications. Here is the code.

When a user lands on the homepage, there are only 3 fonts used: Bold for the navigation links, Extra Bold for the heading, and Extra-Light for the short description. The CSS Font Loading API, a javascript API for loading fonts will load the other remaining 15 fonts. A browser usually allows a max of 6 network connects at a time. Using the preload hint will move the priority of our first stage fonts to the top of the list.

Our @font-face declarations will initiate font downloads for the first stage. This is paired with resource hints for the browser using preload for the 3 fonts on the homepage. Preloading will help reduce FOUT, the flash of unstyled text.

You can see our preload fonts in the waterfall, they are loaded right after the First Meaningful Paint, a user centric metric from the Google Chrome team.

Using Our Fonts

Public Sans is the family name and we use that as our font names in the FontFace declaration. We then set the weight and style accordingly.