<head>tag – instead of the Google Fonts snippet:
When you use a custom font (like a font from Google Fonts), most modern browsers don’t render the text immediately. Instead, they keep the text hidden until the font is downloaded (or until 3 seconds pass). If a user opens a page with a custom font from a slow connection (e.g., from mobile), it will look like this:
This hurts user experience – and affects business metrics.
This tools wraps Google Fonts and makes the text render immediately (with a fallback font). The custom font is downloaded asynchronously and applied later:
font-displayunder the hood.
font-display, a CSS feature that helps to configure how custom fonts are loaded. However, Google Fonts don’t support
font-displaynatively! This tool works around that and adds the
font-display: swapdeclaration to make the browser render the text immediately.
In more details, the generated script:
window.FontFacecheck to detect if a browser supports
font-display. If the browser doesn’t support
font-display, or if
window.FontFaceis not available, the script falls back to inserting a regular
We built the snippet to be as lightweight as possible. To achieve a great performance, this tool:
<link rel="preload">tag for the Google Fonts stylesheet – so the browser starts downloading it even before the snippet runs,
<link rel="preconnect">tag for the domain that serves font files (and
<link rel="dns-prefetch">for older browsers) – so the browser can fetch font files sooner,
Do that in the GitHub repo.
We are PerfPerfPerf. We help companies to make web apps faster and earn more.
We worked with Google and various e-commerce and media companies. Here’s a feedback from one of them:
Ivan [the PerfPerfPerf founder] gave a ton of extremely useful, actionable feedback that directly improved our First Meaningful Paint, Time to Interactive, Speed Index, First CPU Idle metrics significantly. Also, he helped with some bundle size optimization too.
Interaction with Ivan is dense in terms of knowledge transfer, and I guarantee you that you will learn a lot of new things. On top of all these, he’s a super smooth person to work with. All in all, I cannot recommend Ivan enough!
— Cihat Imamoglu, Senior Software Engineer @ Fat Llama
Want to improve conversion, or have issues with performance? Chat with us.