Archived topic
Fix the Google page speed “ Endure text remains visible during webfont load”
6 replies · Started by Howard on June 17, 2020
With the new font-display attribute, you can control the length of each of these periods, and what happens when one of them fails. There are 4 different values: block, swap, fallback and optional. There's also auto, which usually ends up being the same as block. These values are supported on all modern browsers (IE not included), but double check the compatibility table for the latest!
The font display is controlled per font-face:
@font-face {
font-family: 'my-font';
font-display: optional;
src: url(my-font.woff2) format('woff2');
}
Does this go into simple css or add on css?
Thanks
Hi there,
Either option should work :)
I will give it a try!
Thanks
Hi Leo: from google page speed article they wrote this below; is this any different from what you agreed upon from your previous answer on my question below from yesterday??
@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
font-display: swap;
}
Hi there,
that CSS uses: font-display: swap; which is more specific then your other CSS and is what Google generally prefers. I would use this latest one.
Hi David;
Thanks for your information!
Could you please take that code and write it for me as I should actually put it in the css;
( there seems to be a url in there, not sure what if anything should be removed...??)
Thanks
Howard
This document explains how to add a Local Font:
https://docs.generatepress.com/article/adding-local-fonts/
Which that CSS you're trying is applicable to.
It doesn't apply to a font served up by Google, which is what happens with the fonts you see in the customizer.
