first page load - wrong font

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

10/8/2015 10:07:51 AM
Gravatar
Total Posts 46

first page load - wrong font

Hi!

I have specified a sans-serif font family for my site, which previously had a serif font-family. I noticed that when I load the home page for the first time in a browser (Chrome in particular) during the loading I see a serif font,  that turns in sans serif when loading is completed.

I checked for serif font-family  all the .css files in the data/sites/1/skin folder and found nothing. I changed the GUID but still have the problem.

What may be the cause? Where am I wrong?

Thanks in advance for your help

 

Mari

 

 

6/12/2020 12:14:27 PM
Gravatar
Total Posts 211
Community Expert

mojoPortal Hosting & Design @ i7MEDIA!

Re: first page load - wrong font

If you use a web-font that is loaded from an online source (either the same host as the website or fonts.google.com for instance), it often takes a moment for the font to load in and be applied. One thing you can do to reduce the visibility of this is to choose a browser default font that is closer to the appearance of the web-font. For instance, Times New Roman is visually quite different from Open Sans, but Arial & Helvetica are relatively similar, so if you are loading in Open Sans from an online source you can set your font using a css string like this to reduce the visual change: font-family: "Open Sans", Arial, Helvetica, sans-serif;

Some other steps you can take:

  1. Make sure you aren't setting a bunch of different font-family styles on individual elements - be clean and specific with your CSS.
  2. Make sure your webfonts are being called early in the <head> of the document, and that any online source you use has a nice fast CDN.
  3. If the flashing persists and really bothers you, set a "loading" period on your document by adding a loading class to the body, styling it to cover the site content and show a loading notice, then remove the loading class using script in the window load event.