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.
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.