![]() The fonts work but still I get that message. What Ensure Text Remains Visible During Webfont Load Means. The two remaining fonts are ones that I've added inside of app/design/frontend/THEME/VENDOR/web/css/source/lib/_typography.less Geometric Sans Geometric Sans 4 Geometric Sans 4 normal This tells the browser to not block rendering while it waits for the font (well it gives it a short time to load the font and if it doesnt receive it in time will use a fall-back and swap it out when the font is available.). As a dev this is not something I would use a plugin to do, but adding &displayswap to a Google Font stylesheet request. It still shows an error in the diagnostics section for that. This simple attribute in your font's CSS fixes the invisible text issue on WordPress: it displays the text during web fonts loads. ![]() In our Magento build we have a custom theme that uses Luma as a parent.Īfter doing an Audit in Chrome we get the message Ensure text remains visible during webfont load and it lists the following.Īfter following instructions online I add the font-display: swap rule in to app/design/frontend/THEME/VENDOR/web/css/source/lib/_typography.less which results to the below. The interesting thing though is that the live page is using swap to ensure text remains visible during webfont load (you can see it in the code you quoted), but it doesn't register in PageSpeed Insights. To fix the ensure text remains visible during webfont warning, you need to use the font-display: swap declaration on the web font.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |