Hello Philipp,
The “Ensure text remains visible during webfont load” warning from Google PageSpeed Insights is about ensuring that the text content of your website remains visible while web fonts are loading.
Here are a few steps you can take to address this warning:
1. **Use System Fonts**: If possible, consider using system fonts or web-safe fonts for your website’s text content. System fonts are pre-installed on users’ devices and load faster than web fonts.
2. **Load Web Fonts Asynchronously**: If you still want to use custom web fonts, consider loading them asynchronously. This way, the text will be displayed in the default font first, then switch to the web font when loaded.
In HTML/CSS, this can be achieved using methods like the Web Font Loader JavaScript library or CSS @font-face with the font-display property set to "swap".
3. **Add font-display Property**: If you’re using the @font-face rule to load web fonts, make use of the font-display property to control how the browser displays text while the font is loading. For example:
@font-face {
font-family: ‘CustomFont’;
src: url(‘font.woff2’) format(‘woff2’);
font-display: swap; /* This will use a fallback font until the custom font is loaded */
}
Please remember to test any changes on different browsers and devices to ensure consistent behaviour.
Remember, while improving PageSpeed Insights scores is great for optimization, it’s also important to strike a balance between performance and design. Sometimes, minor changes like this might not be necessary if your website’s performance is already acceptable.
Best regards
.
