For performance reasons, you should load a system font by default, and switch to your custom font only after it has loaded. Otherwise, users can be left with a blank page while the font downloads and parses.
The problem with this approach is that the fallback system font and your custom font may look quite different from each other, causing a noticeable change in page design.
Fortunately, Monica (one name, like Beyonce or Prince) has put together Font Style Matcher, an awesome tool for matching your fallback and custom fonts.
I wish I knew about this months ago. Super useful!
🚀 I just relaunched my Vanilla JS Pocket Guides with new code examples and real projects to help tie everything you’ll learn together. Check it out.
Have any questions or comments about this post? Email me at email@example.com or contact me on Twitter at @ChrisFerdinandi.
Get Daily Developer Tips