Page load, font-face and fallback fonts

  • 20 August 2018
  • 7 replies
  • 33 views

Hi folks!

We’re using font-face on some new client landing pages and it works fine for me, my team, and everyone I’ve asked to test it.

When the client loads the pages from their office, they first see the fallback fonts, then the desired ones load after several seconds.

I can’t replicate it, and their internet speed test says they have a screaming fast connection.

Is this actually caused by bad download speeds?

Has anyone else had this problem and maybe found a solution?

Thanks,
Lindsay


7 replies

Userlevel 5
Badge +2

Hi @LindsayDayton!

Could you send a link over so we can check it out?

It could be their browser - have them check https://www.whatismybrowser.com

Check out these pages to see if your font format is supported by their browser:

Also make sure they clear their cache 🙂

Thank you, @Caroline!

That browser link is SUPER useful!!

Unfortunately, I know that their browsers support the font because it’s the font on their website.

I’m almost certain it’s the download speeds at their office, since they haven’t been able to reproduce it anywhere else. Still, you know how clients are… if it doesn’t work for them, they assume it is broken for everyone…

Thanks again!

Userlevel 5
Badge +2

@LindsayDayton - Is their website rendering the font correctly in their office?

Feel free to DM me if you wish me to dive deeper into this for you!

It renders correctly EVENTUALLY, but not before it loads with the fallbacks.

Here’s the actual page: http://join.tides.org/meet-tides-vid/

And here’s a screenshot of what they see:

It still only can be replicated from their own location… o_O

If it is only a problem for their location, it may be as simple as a network issue.

At my organization, we have a problem loading our site without the “www.” on our internal network.

Try loading https://tides.org/ on their internal network. If it redirects to the www.tides.org homepage, then this isn’t the problem. But if it throws an error message, then the internal network does not have a tides.org DNS record pointing to the web server.

If the problem is an internal network issue, the fix should be adding “www.” to the font src.

Change:
https://tides.org/wp-content/themes/tides/src/fonts/Adelle-Regular.woff2

To this (note the “www”):
https://www.tides.org/wp-content/themes/tides/src/fonts/Adelle-Regular.woff2

Thank you @Phillip!

I’ll take this back to them and see what it turns up!

@Phillip IT WORKED!

Thank you so much!!

Reply