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.

This thread is closed to new posts. You must sign in to post in the forums.
10/8/2015 10:07:51 AM
Gravatar
Total Posts 47

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 212
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.
You must sign in to post in the forums. This thread is closed to new posts.