Google Font Print Issues, font-display: swap!

I had an issue that was driving me up a wall. Certain fonts, technically only the normal font weight of the Open Sans font, was not printing on the first “print” attempt. After clicking print a second time the page text would print as normal.

This issue was due to how Chrome loads / displays fonts. Feel free to read up on ‘font-display’ and Chromes issue with printing web loaded fonts. The short answer is basically Chrome was trying to reload the font for the print page instead of using the font it used on the screen.

The solution is thankfully VERY simple. Just add “&display=swap” to your Google Font url string in order to avoid this issue. This also has a variety of other speed benefits, so you should ALWAYS be adding display=swap to your Google Web fonts and Google Fonts now supports this by default.

Import Google Fonts

I know Google already makes it CRAZY EASY to use their fonts, but here is a neat function for enqueueing your Google fonts from your functions folder!

Once you have that setup, you can go ahead and enqueue any fonts you want like so: