Your web fonts are loading in a way that can make your text invisible until the font file has fully downloaded. This is known as the 'Flash of Invisible Text' (FOIT) and it can make your page feel slow. You can fix this by telling the browser to show a fallback font immediately.
A `@font-face` rule without a `font-display` descriptor.
Add `font-display: swap;` to your `@font-face` rules. This tells the browser to show the text immediately with a system font, and then 'swap' it for your custom font once it has loaded.
@font-face {
font-family: 'MyCustomFont';
src: url('/fonts/myfont.woff2') format('woff2');
font-display: swap;
}`font-display: swap` ensures that your content is always readable, even before your custom fonts have loaded. This greatly improves the user's perceived performance and is a key web font optimization.
This issue can affect your site's search engine rankings and user experience. Addressing it promptly helps ensure optimal performance and visibility in search results.
Black SEO Analyzer automatically checks for this warning during site analysis, along with hundreds of other technical SEO issues.
Choose the license that fits your needs and start getting the deep, actionable insights you deserve.