Font flicker effect

Support
#1

Hi,

when I open a post and the connection is slow, I can see a flicker effect on my font style.
First the headline has another font style and then it switches to Roboto Slab.

In the Screenshot you can see above the first style and below the Roboto Slab style.

Post:
https://one-million-places.com/reiseberichte/mittelamerika-karibik/14-taegige-karibik-kreuzfahrt-aidadiva

Is there a way to bypass this effect?

Michael

#2

Hi Michael,

Since you’re pulling the font from a website and you don’t have the font hosted locally on your own server, there’s a delay between your page loading and the font loading from Google Fonts.

What you can try to do is to download the Google Fonts ttf files then upload then in the Font Manager so that it will be hosted locally in your server.

Once you have installed the Fonts in the Font Manager, select those fonts in the font setting.

Let us know how it goes.

#3

I have downloaded the Roboto Slab Fonts here: Roboto Slab

At “Custom Fonts” I have uploaded the 4 different Roboto Slab .ttf fonts and named the Group “Roboto Self”. This Group is now shown up on the top at “Font Manager”.

Now I thought I can choose this self hostet font for my “Headings Font”. But it´s not there in the dropdown list.

So what do I have to do now?

#4

Hi @michaelxxx,

It should work, would you mind providing your admin login credentials so we could check?

Thanks!

#5

I checked again, but it didn´t worked.

#6

Hi Mmichael,

You are not seeing the fonts you have added to the Font Manager because you did not have the Font Manager enabled in the Typography settings.

Kindly enable it so that you could see the fonts from the Font Manager.

Hope this helps.

#7

Perfect, now this works.

But I can see at the “File requests” on Pingdom that there is still a Google Font loading:
<link href='//fonts.googleapis.com/css?family=Open+Sans:300|Open+Sans:400|Open+Sans:700' rel='stylesheet' type='text/css'>

I don´t know were I should use the Open Sans font. Maybe it´s from another plugin, but I can´t find it.
Have you any chance to see why this Google font is loaded on my site?

Michael

#8

Hi Michael,

To force Google Fonts to not load by adding this code to functions.php of a child theme:

    add_filter( 'cs_load_google_fonts', '__return_false' );

https://theme.co/changelog/#theme-pro-2-1-0-theme-x-6-1-0-cornerstone-3-1-0

Hope this helps.

#9

Hi,

i still have the problem with the flicker effect on my headlines. You can test it when you open my site in a private tab: https://one-million-places.com/reiseberichte/nordamerika/usa/instagram-spots-los-angeles

You can see that the headline is shown with another font type and switches than to my “Custom Font Family”.

What is the reason for that behaviour?

#10

Hi Michael,

It only happens on my first load, but doesn’t flicker after loading since the font files are now cached on my browser. Just like any other file, font files are needed to be downloaded and that’s is why it’s happening. It’s greatly affected by internet speed but once it’s cached on your device, it will stay permanent unless you clear your cache again. https://www.dropbox.com/s/ivhhztmwtdigam5/bandicam%202019-01-06%2020-55-42-234.mp4?dl=0

With system font, it doesn’t need to be downloaded so there is no flickering.

And that’s all normal, but if you really wish not to see the flickering, then you would need a site preloader. Which will download all the resources including font files before it renders your site. And if you’ll implement that feature then I recommend contacting a developer.

Thanks!

#11

Ok. Can you tell me what is the system font which is first loaded?

So maybe I can use the system font for my heading, so there should be also no flickering effect, or?

Michael

#12

Hi Michael,

It’s Helvetica,Arial,sans-serif font family. You can try either Helvetica or Arial.

Thanks!

#13

And why is this font set a the standard system font? Is it coming with X and can I change it?

#14

Hi Michael,

They are browser fonts, please check this https://www.granneman.com/webdev/coding/css/fonts-and-formatting/web-browser-font-defaults

The font Helvetica,Arial,sans-serif is applied through the theme to make sure it’s loaded with same system font regardless of browser or operating system. Removing that, for example, will default to Times New Roman in Chrome but Arial in Firefox, hence, creating inconsistency across the browser.

And that’s something you can’t change (default system font), but you can make them look similar through common CSS.

Thanks!

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.