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

Answer 1

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.

Answer 2

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.