Jump to content


Photo

Stop font changing on page load


  • Please log in to reply
22 replies to this topic

#1 Grant Barker

Grant Barker

    Advanced Member

  • Members
  • PipPipPip
  • 326 posts
  • Gender:Male
  • Experience:Intermediate
  • Area of Expertise:I'm Learning

Posted 15 April 2017 - 11:20 PM

When my pages load it takes a split second for the Google font ('Sniglet') to show up, and/as it quickly replaces the default font.

This is ugly to see each time, and I'd love to stop it from happening.

 

It appears to be more noticeable in Microsoft Edge.

 

Edit: The advice on this page seems to have helped somewhat.

 

I placed the following code in the top of my <head>.

 

I'm not sure if I'm supposed to be using both the Link and the script, but it seems to have helped for now, although I'm still getting some occasional issues using Edge.

<link href="https://fonts.googleapis.com/css?family=Sniglet" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.27/webfont.js"></script>
<script>
  WebFont.load({
    google: {
      families: ['Sniglet']
    }
  });
</script>

Edited by Grant Barker, 16 April 2017 - 01:54 AM.


#2 fisicx

fisicx

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 1,572 posts
  • Gender:Male
  • Location:Aldershot
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 16 April 2017 - 06:32 AM

Simple solution is to not use Google. Download the font and call it in your stylesheet:

@font-face {font-family: Sniglet;src: url(assets/Sniglet.ttf);}

Then just add the font to your styles:

body {font-family: Sniglet, Arial, sans-serif;}


#3 Nillervision

Nillervision

    All-rounder

  • Privileged
  • PipPipPipPipPip
  • 1,597 posts
  • Gender:Male
  • Location:Copenhagen, Denmark
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 16 April 2017 - 07:42 AM

 

Simple solution is to not use Google. Download the font and call it in your stylesheet:

@font-face {font-family: Sniglet;src: url(assets/Sniglet.ttf);}

Then just add the font to your styles:

body {font-family: Sniglet, Arial, sans-serif;}

 

I'm not so sure that font-face is faster.

The client still have to load the fonts and depending on your hosting it is not certain that your server responds faster than Googles CDN.

Also If you are using some of the popular fonts from Google there is a good chance that they are all ready cached in the users browser.

 

 

Make the Web Faster

Google Fonts makes product and web pages run faster by safely caching fonts without compromising users’ privacy or security. Our cross-site caching is designed so that you only need to load a font once, with any website, and we'll use that same cached font on any other website that uses Google Fonts.

 

https://fonts.google.com/about


Edited by Nillervision, 16 April 2017 - 07:44 AM.


#4 fisicx

fisicx

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 1,572 posts
  • Gender:Male
  • Location:Aldershot
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 16 April 2017 - 07:57 AM

Using Google fonts can really slow down a site. There are a number of tests that show this. And on the Google own page speed tests they tell you their own font service is a blocking resource!

 

There a gazillions of Google fonts, the chances of many of them being cached is slim. This means you will often get the glitch as the fonts switch.

 

However, if you want to use a Google font you can still set up the styles in your CSS, there is no need to use webfont.js



#5 Nillervision

Nillervision

    All-rounder

  • Privileged
  • PipPipPipPipPip
  • 1,597 posts
  • Gender:Male
  • Location:Copenhagen, Denmark
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 16 April 2017 - 08:38 AM

Google own page speed tests they tell you their own font service is a blocking resource!

 

Google PageSpeed will tell you that for any request on your page (including the ones to your own server). It is true that you can save a single request by adding your font-face rules to your existing stylesheet, but the request it self is not what adds most to the load time, it is the actual bytes that needs to be transferred to the client.

 

 

There a gazillions of Google fonts, the chances of many of them being cached is slim.

 

Maybe if you choose a very special font. But fonts like Lato, Oswald, Roboto are some of the most used fonts on the web so if you are using any of these there are real good chances that the user have them cached 

 

The whole point of using a CDN is speed. The data will be transferred to the client from a large network of severs located all over the world rather than from your own local or cheap shared host


Edited by Nillervision, 16 April 2017 - 09:54 AM.


#6 fisicx

fisicx

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 1,572 posts
  • Gender:Male
  • Location:Aldershot
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 16 April 2017 - 09:31 AM

And while CDN is all about speed, as Grant has discovered it still causes a styling glitch. Even using a popular font you often see the switch happening.

Grant has a niche site, using a CDN is reAlly necessary. I'd put money on using a font saved locally would make virtually no difference to the page load speed.


#7 rbrtsmith

rbrtsmith

    ReferenceError

  • Privileged
  • PipPipPipPipPip
  • 4,034 posts
  • Gender:Male
  • Location:Manchester, UK
  • Experience:Nothing
  • Area of Expertise:Web Developer

Posted 16 April 2017 - 10:15 AM

Using custom fonts can slow down your site to some degree.  Google fonts or any CDN for serving static assets (fonts, images) is a good idea for a number of reasons: greatly reduced latency, if you get a spike in traffic your asset is also distributed across a number of cloud servers that work in an elastic fashion during high demand - more will just be pulled in.  Also consider because of Google Web Fonts popularity a percentage of your visitors likely have this font cached already.  It is also free so you won't hit data limits from your provider nearly as quickly.

There's many reasons why big companies choose serve up assets via CDN rather than self host...

 

OP: The issue you are experiencing is known as FOUT - Flash Of Unstyled Text.  a likely issue here is that the font you have chosen is too large, adding additional weights and styles like italic will also add to the weight, as well as additional fonts.  I would generally recommend you use a font that's established on everybody's machine and only use custom fonts if they serve a good marketing purpose.

You can avoid FOUT, but the downside is that users on slower connections will not be able to consume any content until the typographical assets have been downloaded - this is likely to be much more frustrating than FOUT.


Edited by rbrtsmith, 16 April 2017 - 10:18 AM.


#8 rbrtsmith

rbrtsmith

    ReferenceError

  • Privileged
  • PipPipPipPipPip
  • 4,034 posts
  • Gender:Male
  • Location:Manchester, UK
  • Experience:Nothing
  • Area of Expertise:Web Developer

Posted 16 April 2017 - 10:21 AM

Using Google fonts can really slow down a site. There are a number of tests that show this. And on the Google own page speed tests they tell you their own font service is a blocking resource!

 

Can you share some of these tests with us?
Also Google Webfonts can be called asynchronously so it does not have to be blocking.



#9 fisicx

fisicx

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 1,572 posts
  • Gender:Male
  • Location:Aldershot
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 16 April 2017 - 10:40 AM

Google tells you on their own pages that some fonts are slow: https://developers.g...e.com/fonts/faq

 

The issue here isn't speed. I agree a CDN can be very fast. The issue here is the glitch as the font is applied to the page. Not using webfonts.js will help this.

 

So make sure the Sniglet font is downloaded before the CSS and then call the fontface in the stylsheet. This should stop the glitch.

 

And I agree that using a CDN for fonts, images, scripts and other resources can make for a faster loading site. But on smaller sites with low visitor numbers the speed difference is minimal. I've been split testing this for about a year on one site and using a CDN makes no appreciable difference. What speeded things up was reducing the number of server/HTTP calls and minimising/optimising where possible.

 

But if you have a large popular site with visitors from multiple locations then of course a CDN makes sense.



#10 Grant Barker

Grant Barker

    Advanced Member

  • Members
  • PipPipPip
  • 326 posts
  • Gender:Male
  • Experience:Intermediate
  • Area of Expertise:I'm Learning

Posted 16 April 2017 - 01:21 PM

Thank you @fisicx, @Nillervision and @rbrtsmith very much for your input here! Sensible logic tells me that I should do away with external fonts, but it's not easy for me to find a look that I like. (Not too boring, not too serious, not self-important, etc.)

 

It might affect SEO, but I could turn the title font into an image, so that's not affected.

 

Tomorrow, just out of curiosity I'll host the font locally (on the server) and see if there are any apparent differences, and try the other things you have recommended.

 

I understood all of your opinions, and maybe wouldn't have noticed it as much if I wasn't previewing as frequently in Microsoft Edge.

 

(I feel that Edge seems to clear the browser cache or reload the page very quickly and thoroughly compared to even manually emptying the cache in Opera, Chrome and FF.)

 

Thank you very much. 


Edited by Grant Barker, 16 April 2017 - 01:23 PM.


#11 rbrtsmith

rbrtsmith

    ReferenceError

  • Privileged
  • PipPipPipPipPip
  • 4,034 posts
  • Gender:Male
  • Location:Manchester, UK
  • Experience:Nothing
  • Area of Expertise:Web Developer

Posted 16 April 2017 - 03:01 PM

Don't turn the title font into an image that makes it inaccessible and also hurts your SEO. a web font is probably smaller also than an image.



#12 Grant Barker

Grant Barker

    Advanced Member

  • Members
  • PipPipPip
  • 326 posts
  • Gender:Male
  • Experience:Intermediate
  • Area of Expertise:I'm Learning

Posted 17 April 2017 - 02:42 AM

Don't turn the title font into an image that makes it inaccessible and also hurts your SEO. a web font is probably smaller also than an image.

 

OK. Thanks Robert.



#13 Grant Barker

Grant Barker

    Advanced Member

  • Members
  • PipPipPip
  • 326 posts
  • Gender:Male
  • Experience:Intermediate
  • Area of Expertise:I'm Learning

Posted 18 September 2017 - 03:14 AM

I might have to go with sans-serif. I'm not sure how to stop this problem in Microsoft Edge. Other browsers seem to be OK.



#14 Grant Barker

Grant Barker

    Advanced Member

  • Members
  • PipPipPip
  • 326 posts
  • Gender:Male
  • Experience:Intermediate
  • Area of Expertise:I'm Learning

Posted 14 November 2017 - 12:05 AM

A very simple test of this font flashing problem in Edge and IE is with this link: https://developers.g...getting_started

 

If you refresh the page in Edge or IE, you see the font change. Chrome, Firefox and Opera don't have that issue.

 

I like Edge for testing pages, because it seems to clear the cache and load new elements quicker than other browsers do.

 

I guess there isn't a way around this issue for now. I was going to spend time playing with my code to try to fix this, but if it happens with the simple page above, then I'll put it aside for now.

 

This is just food for thought. I know my site is still very old-fashioned in many ways, cough icons! but it's true to my taste and it's just a hobby, so please forgive any cringe elements.



#15 fisicx

fisicx

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 1,572 posts
  • Gender:Male
  • Location:Aldershot
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 14 November 2017 - 06:02 AM

I don't see this. The page loads the way it should in Edge.



#16 Jack

Jack

    NaN

  • Moderators
  • PipPipPipPipPip
  • 3,206 posts
  • Gender:Male
  • Location:Jersey Channel Islands
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 14 November 2017 - 12:05 PM

It looks like you're including the entire font family, when you probably only need certain weights. You can generate a new version on Google Web Fonts that only includes the styles you need. Also, the webfont.js loader you're using will let you add a class name to a font before it's loaded, so you can use something like visibility: hidden; to avoid the sudden flash of unstyled text, the docs for that are here https://github.com/t...t/webfontloader. I recommend not doing this if possible, instead select a fallback font that's as close to the web font as possible and you will get minimal changes when the font loads in.



#17 Grant Barker

Grant Barker

    Advanced Member

  • Members
  • PipPipPip
  • 326 posts
  • Gender:Male
  • Experience:Intermediate
  • Area of Expertise:I'm Learning

Posted 14 November 2017 - 12:41 PM

It looks like you're including the entire font family, when you probably only need certain weights. You can generate a new version on Google Web Fonts that only includes the styles you need. Also, the webfont.js loader you're using will let you add a class name to a font before it's loaded, so you can use something like visibility: hidden; to avoid the sudden flash of unstyled text, the docs for that are here https://github.com/t...t/webfontloader. I recommend not doing this if possible, instead select a fallback font that's as close to the web font as possible and you will get minimal changes when the font loads in.

 

Thanks, Jack. I just got back from work and I'll look into this when I next have some free time. I really appreciate the info and I look forward to improving this situation.



#18 Grant Barker

Grant Barker

    Advanced Member

  • Members
  • PipPipPip
  • 326 posts
  • Gender:Male
  • Experience:Intermediate
  • Area of Expertise:I'm Learning

Posted 14 November 2017 - 12:49 PM

I don't see this. The page loads the way it should in Edge.

 

I see it in Edge when I press F5 and refresh the browser: https://developers.g...getting_started

(The Making the Web Beautiful part.)

I don't know if internet speed makes much of a difference. (Mine happens to be about 188 Mbps just now.)

Maybe people with much more or much less speed can chime in.

Much appreciated.

(It's almost bedtime here, so I'll follow up and try to improve this soon.)

Thanks all. 



#19 fisicx

fisicx

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 1,572 posts
  • Gender:Male
  • Location:Aldershot
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 14 November 2017 - 02:13 PM

Why are you even using webfont.js?

 

It's not needed, all you need to do is add the Google code to your header and the font name to your CSS



#20 Grant Barker

Grant Barker

    Advanced Member

  • Members
  • PipPipPip
  • 326 posts
  • Gender:Male
  • Experience:Intermediate
  • Area of Expertise:I'm Learning

Posted 15 November 2017 - 09:04 AM

Why are you even using webfont.js?

 

It's not needed, all you need to do is add the Google code to your header and the font name to your CSS

 

Thanks. I just removed it. Much appreciated.



#21 mountmedia

mountmedia

    Forum Newcomer

  • Members
  • Pip
  • 1 posts
  • Gender:Male
  • Location:Barnet, London
  • Experience:Web Guru
  • Area of Expertise:Designer

Posted 15 November 2017 - 11:54 AM

Grant, if that is your main focus then you can.

 

link and script tag to Include both at the top (head) section so they load as quick as possible.

 

however they may slow be render blocking this way.

 

If all fails, maybe look into using pre-loaders. that waits for relevant contents and then it would fix that issue.



#22 Grant Barker

Grant Barker

    Advanced Member

  • Members
  • PipPipPip
  • 326 posts
  • Gender:Male
  • Experience:Intermediate
  • Area of Expertise:I'm Learning

Posted 15 November 2017 - 11:17 PM

Grant, if that is your main focus then you can.

 

link and script tag to Include both at the top (head) section so they load as quick as possible.

 

however they may slow be render blocking this way.

 

If all fails, maybe look into using pre-loaders. that waits for relevant contents and then it would fix that issue.

 

Thanks. I added it back for now. I'm not sure why I added it ages ago, but I had obviously done it for a reason. I will research it some more when I have the free time. I'm keen to smooth out the issue. It used to be that old versions of IE were the problem for various reasons, but Edge is new and indeed my main browser of choice.


Edited by Grant Barker, 15 November 2017 - 11:17 PM.


#23 Grant Barker

Grant Barker

    Advanced Member

  • Members
  • PipPipPip
  • 326 posts
  • Gender:Male
  • Experience:Intermediate
  • Area of Expertise:I'm Learning

Posted 19 November 2017 - 06:10 AM

I'm not sure if I've accidentally improved the situation. Maybe you can check for yourself, too?

(It could just be my internet speed today or something, but the font changing doesn't seem to be so bad anymore.)

 

What it might have been was an empty div (it might have had blank spaces in it in code view DW) which I was also addressing and positioning via CSS. I have put stuff back inside the div and it seems to have accidentally fixed the issue. If it does occasionally flash the font, I'm not sure if that is because of browser cache or what, since.

 

If you're curious enough and you tried and noticed it before (in IE or Edge), please give me your 2 cents if you notice a difference.

 

I'll keep my fingers crossed. It seems too good to be true at the moment. I'd love to know for sure. The only significant thing I did was add stuff to the empty div and reposition it a little. 


Edited by Grant Barker, 19 November 2017 - 06:11 AM.





1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users