CODEWITHSUNDEEP
htmlcsswordpressfonts
Sam Jefferies
Sam Jefferies

Reputation: 594

Font loads then flickers to correct font

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;
}

Upvotes: 1

Views: 961

Answers (1)

R.K.Bhardwaj
R.K.Bhardwaj

Reputation: 2192

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

Upvotes: 1

Related Questions