Google Fonts recently released an update that allows you to pass it through the new Font Display Swap property. This is a property that allows you to resolve a number of web performance issues related to font rendering.
However, web fonts have an inherent flaw. If you add a web font, the user has to wait for the font file to download, before the text is displayed. There are some fancy tricks you can do, to show un-styled text. Let’s be real though, we want to do as little work as possible to get the desired results.
Web performance nuts like me have a love-hate relationship with web fonts. I love the way they look. If I removed all of the web fonts on my site, the page weight would decrease by 100 KB. However, I am not going to remove web fonts. Why? Because system fonts are ugly and boring. When my whole website is black and white, the least I can offer is some nice fonts to look at.
Introducing Font Display: Swap
Font Display Swap is the prodigal child. It resolves the issue with fonts being invisible, while loading the fall-back system font. After the web font is downloaded, the system font text is swapped to the correct web font file.
If you are one of those people, who do not want the text swapping back and forth, as that would ruin the user experience (or some other nonsense reason), then you can make use of the font display option property. This property gives the browser a 100 millisecond window to download the font file. If it does not load in that time period, then it will show a system font and never swap. However, let’s talk more about swap, because that is my preferred option. And well. This is my blog.
Swap solves a few things. First, it solves the real UX issue of text not being visible during the loading period. If your website makes use of a large number of web font, then it is going to take a while for the font files to be downloaded. If you use a web performance technique, such as critical CSS, then certain aspects of the above the fold content will be loaded before the font files are downloaded. This creates a problem where your website loads, but the fonts are “flashed” in after the fact. This is problematic because it ruins the entire point of using critical CSS. Critical CSS is used to make the website accessible and able to be read faster. It also looks hideous. Font swap manages to fix both of these issues quite elegantly. I highly recommend using it for Google Fonts
So, How Do I Implement This On My Website
Font Display Swap can be implemented fairly easily.
To implement:
1. Include the font display swap parameter in font family calls. You can do this by by appending the attribute to the Google Fonts URL.
2. Download my plugin which will do all of that for you
You can checkout the code for yourself on the Github repository here.
This plugin is ultra lightweight. It doesn’t not have an options panel or notifications. It doesn’t do anything more than append the font display swap attribute to the Google Font URL.
Maybe, that’s not good enough for you. However, I like to avoid cluttering the admin panel with a bunch of settings windows; which for the most part, you’ll never use. Except, maybe once.
Closing Thoughts
You can use font display swap to make invisible text, visible again. It also improves user experience tremendously.
If you have any questions regarding font display swap feature, feel free to ask in a comment below. If you have any issues with my plugin, feel free to contact me on Github, contact form on my website, or in a comment below.
