![]() ![]() If you click on the “Ensure text remains visible during webfont load” warning, it will tell you which font files are the issue. It can be challenging to track down the culprit, but the Google PageSpeed Insights interface can help you narrow it down. If you’re still experiencing the “Ensure text remains during webfont load” warning on Google Fonts, you need to ensure that all the fonts you’re using have the Font Display property set to “swap.” This includes the Google Fonts that you’ve uploaded via this guide, but also any other fonts that you may be using. If it's still there, refer to the section below After these changes your “Ensure text remains visible during webfont load” Google PageSpeed Insights alert should be cleared.Remember to publish the website after you've made your changes.Repeat these steps for all elements that are using a Webflow-installed Google Font, replacing all the Webflow-installed versions with your uploaded custom font versions.When you select the normal style in the Designer, the “ABeeZee-Regular.ttf” file will be used, when the style is set to Italics, the “ABeeZee-Italic.ttf” file will be used. By setting them both to “Abeezee GF” the two different files will be used when appropriate. In our example, I’ve set the Font Family properties for both uploaded files to “Abeezee GF” to indicate it’s a Google Font that’s been uploaded, and not installed by Webflow. *IMPORTANT* Font Display: Based on the CSS property of the same name (font-family), set this to “Swap” to prevent the “Ensure text remains visible during webfont load”.Style: Whether the font is normal, or italic.Some fonts have different files for different levels of boldness/font weight Font Weight: This is how bold your font is.If you set multiple font files with the same Font Family, then they will be grouped together under one name in the Designer Font Family: The name of the font that shows up in the Webflow Designer.A brief description of each can be found below. In the configuration menu, you can set some settings such as the Font Family, Font Weight, Style, and Font Display. ![]() If you’re using Google Fonts that were installed via the Webflow interface (see photo below), Webflow does not apply font-display: swap to them, so when they’re used in your page, you will not have the optimizations that font-display: swap provides and will receive the “Ensure text remains visible during webfont load” alert in Google PageSpeed Insights. ![]() This allows the desired font to load for as long as needed without blocking the page load, and once loaded the browser will swap in the desired font. One of the most common ways to optimize a font is to apply the font-display: swap CSS property so that the block time of a custom font is reduced to almost zero, and the swap time is infinite.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |