Please let us know if you need any further assistance regarding this. You can simply use a plugin like this which automatically adds the required font-display property to the Google fonts declarations. However, the solution for Google fonts is a bit simpler. During page rendering, web fonts are applied to the text by the browser. They are usually hosted on a web server or on the server of a font provider. Such fonts are known as web fonts: examples include Arial, Helvetica, and Georgia. Would I then have to do something for each of the fonts that I want separately?Īccording to the Google PageSpeed Insights test, your website is actually using a couple of Google fonts, here’s another screenshot for reference:į is actually a source for Google fonts and I believe Elementor is loading them on your site. The look of a page can be enhanced by using fonts other than the system fonts. I would prefer not to load all the Google fonts since I am not using them. The reason I’m suggesting this approach is because if you go ahead and manually edit the plugin code to include font-display, your changes will be wiped off in the next plugin update. Ensuring your text remains visible as the web font loads, helps in preventing blank pages and unnecessary layout shifts for a better page experience. This issue is known as the Flash of Invisible Text (FOIT). Solution: The best approach to address the addition of font-display in these third-party plugins would be to get in touch with their support, show them the report and requesting them to add it in an upcoming update. In these situations, your text remains invisible or hidden from the user for a brief period until your web font has downloaded. Normally, these fonts would be declared via in their respective plugin CSS files. The first font is loaded from the WPTouch plugin, the second and the last ones are icon fonts loaded from the Elementor plugin. As you can see in the screenshot, if you hover over the font sources, it will show you the detailed path of the font file from where it is loaded. This is a screenshot taken from the Google PageSpeed Insights test. Its definitions can be usually found within the CSS files, mostly in your theme and in some cases, a few plugins.Įxplanation: I ran a test for your website in Google’s PageSpeed Insights and found out which fonts were referred to in this case. Where would I find or the font-display is a CSS-rule which is used to define the font (and its styles) that will be used throughout the website. I’ll try my best to address them in the following:
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |