Material Icons and Roboto not loaded in Safari - only Safari

Question

as you can see in the screenshot the icons and the font are not loaded correctly.

Our observation is that this only does not work in Safari. No matter if we are testing on iPhone or on a Mac.

The fonts are loaded as follows:

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

Any other Browser we tested displays the icons and font correctly. (Google Browser on iOS; Chrome on Windows)

From what we see in the Safari Debugger it seems that the font files can't be downloaded. (I didn't want to write this but: Sometimes i have observed that it works for a short time and then stops working.)

In Chrome the result looks like this:

What would be the suggestion?

Self Hosting? Why?

Update 2019-11-13: Found additional information at: https://github.com/doanythingfordethklok/safari-cache-bug

Have you tried other font families to verify that there's not something wrong with the payload on Google's end? Try something like `Lato` or `Open Sans` instead of `Roboto` — Bryce Howitson, Nov 19 '19 at 03:15
I figured it was a long shot but you never know. I've had trouble with specific font files from Google in the past. — Bryce Howitson, Nov 19 '19 at 16:42
Is self hosting the font an option? It's not ideal but then you could base64 encode the font as part of your CSS. This would avoid the redirect while fetching resources issue that you found. — Bryce Howitson, Nov 19 '19 at 16:44
Maybe check [this similar question](https://stackoverflow.com/questions/24061808/google-font-not-working-on-safari) out. Try putting your `font-family: Roboto;` in quotes, if you haven't? — matthew-e-brown, Nov 19 '19 at 19:37
@BryceHowitson i tried self hosting in the meanwhile. But it had no effect. — Daniel, Nov 19 '19 at 19:58
Encoding the file inline into your CSS was the part I was talking about. — Bryce Howitson, Nov 19 '19 at 19:59
Did you try specifying `font-weight` and `font-style` along with `font-family`? It seems to work for many people in this post https://stackoverflow.com/a/33959265/7692859 — Anis R., Nov 19 '19 at 20:28

score 3 · Accepted Answer · edited Nov 13 '19 at 15:47

You seem to be running into exactly the bug you've updated your post with.

Are you perhaps redirecting the user a bunch of times on initial app load? If so the safest bet would be to wait for actual user input before starting any redirects, this will also ensure everything has been loaded properly.

An alternative approach would be to wait for the document to become ready via (i.e. jQuery's) document.ready function:

$(document).ready(function() {
    // your code here
});

You could try putting your code there or, alternatively, wait for user input until initiating the redirects. I personally didn't have any luck with the document.ready approach and switched to the user input method.

score 1 · Answer 2 · answered Nov 20 '19 at 07:26

One of below methods might be helpful to fix this font loading issue in Safari browser.

I have inspected above linked google font source codes and attached two screens here. Please note that only .woff2 font file format is linked.

This is the screen of google 'Roboto' font source code.

This is the screen of google 'Icon' font source code.

I found that .woff2 format is not fully supported by all Safari versions. Safari versions below the 9.1 don't support for .woff2, while that is partially and fully supported by safari versions.

Below I have attached a screen for your reference.

Red - Not Supported.
Light Green - Partially supported.
Dark Green - Fully Supported.

I think Safari version of your device stands between 3.1 - 11.1.

Fix

First you need to download your font file and then need to upload and transform that font file to .ttf, .eot, .woff, .woff2 formats using Transfonter official site. Please make sure to check above file formats you needed to have before click 'convert' button.

Once you download and extract compressed file, you will able to see, there are all converted files and a css style sheet. Keep all of them together and linked that CSS style sheet to your application.

Hope this will fix your issue.

0llie · Answer 3 · 2021-06-07T09:03:32.990

1

We have the same issue on https://www.flimmo.de and self hosting didn't solve the issue. But I found the reason: Content Blocker

I have Firefox Klar running. When I disable it the page renders correctly.

Firefox Focus/Klar can block Web fonts, which has to be deactivated in the Klar App Settings, see https://github.com/mozilla-mobile/focus-ios/issues/1889

edited Jun 07 '21 at 09:03

answered Jun 02 '21 at 08:58

0llie

8,758
2
24
13

For me, I use AdBlock Pro on my MacBook. There is a rule called "#6 Custom", whose description is: "Blocking filters for language specific websites and more.". After disabling this particular rule, I'm able to see the icons load again! Manually disabling the "Block custom web fonts" option didn't seem to help in my case - but the issue was my Content Blocker. – Pablo Alexis Domínguez Grau Feb 13 '23 at 03:59

score 0 · Answer 4 · answered Jun 10 '20 at 09:37

I had the same problem. For me it was being loaded in safari, the browser was just not repainting / recalculating the styles after loading this font (in my case it was being loaded from Googles CDN).

What I did was, instead of loading the font in my index.html with the rest of the bundle I added an @import in my App.vue CSS. If you are not using Vue I guess you can add a CSS file that imports the font from the CDN instead of having it in the index.html.

Hope this will help somebody ✌✌

Material Icons and Roboto not loaded in Safari - only Safari

4 Answers4

Fix