remove previous font from theme after change

hgcllc · Member · December 1, 2016 at 6:30 pm
Copy link

Add topic to favorites
Hi. I have been doing quite a bit of CSS customization. When one clicks on our site, the font glitches with the default font and then goes to our font when it first loads. this is annoying. I am happy to return to the default font, if this cannot be removed. when i inspect the page it looks like this…
;
“Montserrat”,sans-serif.wf-active .site-title

‘Playfair Display’, serif.site-title

“tinos-1″,”tinos-2”,sans-serif.wf-active body, .wf-active button, .wf-active input, .wf-active optgroup, .wf-active select, .wf-active textarea
“tinos-1″,”tinos-2”,sans-serif.wf-active body, .wf-active button, .wf-active input, .wf-active optgroup, .wf-active select, .wf-active textarea

Georgia, Cambria, “Times New Roman”, Times, serifbody,’

The part where the word playfair is above has stike lines thru it and I would like to remove the default font, Can anyone help me with this?
Thanks.

The blog I need help with is: (visible only to logged in users)
hgcllc · Member · December 1, 2016 at 6:34 pm
Copy link
This page describes my issue better, but I don’t understand the solution. http://stackoverflow.com/questions/11816637/how-to-remove-the-default-font-in-the-browser-while-loading-font-face-in-css
hgcllc · Member · December 1, 2016 at 6:38 pm
Copy link
This page also has good information, but I don’t see how to add this with WordPress,

https://www.paulirish.com/2009/fighting-the-font-face-fout/

Thanks again.
mkrdip · Theme Author · December 2, 2016 at 7:35 pm
Copy link
Hi there,

I have noticed that issue too.

The Typekit fonts are managed and added to a site by WordPress.com, we the theme authors do not have any control over this. I am tagging a WordPress.com staff here, hope they’ll be able to help on this.

Have a nice day.
chad1008 · Staff · December 5, 2016 at 2:01 pm
Copy link
Hey @healthgrowthcapital!

One possible remedy here is the use of CSS.

For anyone else finding this thread later on, the flash of unstyled text (FOUT for short) happens because the page has to load a custom font file – which takes longer than the page itself.

So, the page loads, but the custom font isn’t available and the web browser falls back to a default font instead. Once the font becomes available it updates automatically.

This happens quickly in many cases, and appears as a split second flash of test.

You can use the following CSS style to hide the text during the loading period:
```
.wf-loading body {
    visibility: hidden !important;
}
```
Or, if you’d like to target specific page elements, you can use this snippet – removing the one’s you’d rather not use:
```
.wf-loading h1,
.wf-loading h2,
.wf-loading h3,
.wf-loading h4,
.wf-loading h5,
.wf-loading h6,
.wf-loading .site-title,
.wf-loading .site-description,
.wf-loading .main-navigation,
.wf-loading .widget {
    visibility: hidden !important;
}
```
The drawback with this approach (discussed in the comments of the link you shared above) is that the text remains invisible until the custom font is loaded.

That means on a slower connection, your page may not be readable for the time it takes that particular visitor to load the font :)

For this reason, I’d recommend using that second snippet, and selecting only the items you really want to hide the font on – like the site title, for example.

No items found.