Font loads then flickers to correct font

Question

I'm loading custom font's locally but when my website loads it appears to show a default font before flickering to the correct font.

Live example: https://www.moneynest.co.uk/property-vs-shares/

Can anyone help?

/* Open Sans regular */

@font-face {
  font-family: "Open Sans";
  src: url("./wp-includes/fonts/OpenSans-Regular.eot"); /* IE9 Compat Modes */
  src: url("./wp-includes/fonts/OpenSans-Regular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("./wp-includes/fonts/OpenSans-Regular.otf") format("opentype"), /* Open Type Font */
    url("./wp-includes/fonts/OpenSans-Regular.svg") format("svg"), /* Legacy iOS */
    url("./wp-includes/fonts/OpenSans-Regular.ttf") format("truetype"), /* Safari, Android, iOS */
    url("./wp-includes/fonts/OpenSans-Regular.woff") format("woff"), /* Modern Browsers */
    url("./wp-includes/fonts/OpenSans-Regular.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}

/* font converted using font-converter.net. thank you! */
@font-face {
  font-family: "Open Sans";
  src: url("./wp-includes/fonts/OpenSans-Bold.eot"); /* IE9 Compat Modes */
  src: url("./wp-includes/fonts/OpenSans-Bold.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("./wp-includes/fonts/OpenSans-Bold.otf") format("opentype"), /* Open Type Font */
    url("./wp-includes/fonts/OpenSans-Bold.svg") format("svg"), /* Legacy iOS */
    url("./wp-includes/fonts/OpenSans-Bold.ttf") format("truetype"), /* Safari, Android, iOS */
    url("./wp-includes/fonts/OpenSans-Bold.woff") format("woff"), /* Modern Browsers */
    url("./wp-includes/fonts/OpenSans-Bold.woff2") format("woff2"); /* Modern Browsers */
  font-weight: 700;
  font-style: bold;
}

Sounds like a FOUC (Flash of Unstyled Content). You could look into using js to only show content when everything has been loaded. — Xoog, Feb 01 '18 at 10:54
Surely their must be away to fix this without slowing everything down? — Sam Jefferies, Feb 01 '18 at 11:01
If anything, it's the fonts that are slowing things down as they aren't loading quick enough. [This may help you.](https://stackoverflow.com/questions/3221561/eliminate-flash-of-unstyled-content) — Xoog, Feb 01 '18 at 11:03
Thanks Xoog, the first time a page loads it still flashes but the fonts stay the same - loading correctly the first time (fixed since below). Once I go onto a second page etc there are no more flashes whatsoever. Is there a way to elimate the first flash? — Sam Jefferies, Feb 01 '18 at 11:09

score 1 · Answer 1 · answered Feb 01 '18 at 10:55

1

Please add full path of fonts with https instead of HTTP in your URLs like so

@font-face {
  font-family: "Open Sans";
  src: url("https://www.moneynest.co.uk/wp-includes/fonts/OpenSans-Bold.eot"); /* IE9 Compat Modes */
  src: url("https://www.moneynest.co.uk/wp-includes/fonts/OpenSans-Bold.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("https://www.moneynest.co.uk/wp-includes/fonts/OpenSans-Bold.otf") format("opentype"), /* Open Type Font */
    url("https://www.moneynest.co.uk/wp-includes/fonts/OpenSans-Bold.svg") format("svg"), /* Legacy iOS */
    url("https://www.moneynest.co.uk/wp-includes/fonts/OpenSans-Bold.ttf") format("truetype"), /* Safari, Android, iOS */
    url("https://www.moneynest.co.uk/wp-includes/fonts/OpenSans-Bold.woff") format("woff"), /* Modern Browsers */
    url("https://www.moneynest.co.uk/wp-includes/fonts/OpenSans-Bold.woff2") format("woff2"); /* Modern Browsers */
  font-weight: 700;
  font-style: bold;
}

EXAMPLE

answered Feb 01 '18 at 10:55

R.K.Bhardwaj

2,168
1
14
24

Thanks, have done so. Still encountering the same issue though. – Sam Jefferies Feb 01 '18 at 11:00
1

I think you have misunderstood - the fonts are loading. He's experiencing a FOUC. – Xoog Feb 01 '18 at 11:00
Just added an extra style for light font and it seems to have fixed the issue (alongside adding the full paths) woho! – Sam Jefferies Feb 01 '18 at 11:06
Don't believe it was a FOUC @Xoog as I was adding the fonts locally, which is one the fixes for FOUC. – Sam Jefferies Feb 01 '18 at 11:07
@Raj the correct font now loads first but on the first page load I still get a flash (although the font remains the same after). Upon visiting a second page etc there is no more flashes. – Sam Jefferies Feb 01 '18 at 11:10
Please call your fonts holding file into the header.php file between section. – R.K.Bhardwaj Feb 01 '18 at 11:31
Thanks, exactly what do you mean by that? – Sam Jefferies Feb 01 '18 at 11:56
I mean that call your fonts file URL into your common file something header.php coz header file going to use on the whole website then the fonts will start working on inner pages too. – R.K.Bhardwaj Feb 01 '18 at 12:01

Font loads then flickers to correct font

1 Answers1