Material Icons and Roboto not loaded in Safari - only Safari

safari browser font problem
roboto icons
mdc icons
material icons cheatsheet
material-icons extended font
material icons white
material icon color
material icons cdn

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

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.

Material Icons are not being rendered on Safari 8 in iOS 8.1 (i.e , Just open the page, no material icons are Material Icons are not being rendered on Safari 8 in iOS 8.1 (i.e iPhone 4s) #226. Closed The header ( where it says "ICONS") should be styled in Roboto Mono, but isn't. Material Icons and Roboto not loaded in Safari - only Safari. Hot Network Questions Connecting Fuse Tap to another Fuse location What rules allow a student pilot to

Material Icons and Roboto not loaded in Safari – only Safari, 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: Dismiss Join GitHub today. GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together.

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 ✌✌

Google Fonts not Loading Properly in Safari and Firefox, I have tried using the specific Google font in a simple banner file but I am not able to reproduce the problem. In my file I have the following link:. Also, SVG is not great for body text. Since text selection is broken on Safari, Safari Mobile, and Chrome, you cannot select individual characters, words, or any custom selection. You can only select the whole row or paragraph of text. However, if you are targeting iPhone and iPad users, SVG fonts are your only choice.

material icons not being loaded correctly the first time in Safari (mac , it does load fine when I view the content FF, Safari, and Chrome. I haven't tried other google fonts so this could be an issue just with Oswald but really not sure� Images, audio, and video which are not available over https:// will not be loaded by the browser, in order to protect users. Other browsers may adopt different strategies. However, as the use of HTTPS continues to grow, developers should expect that passive mixed content may stop functioning in modern browsers over time. Blocking mixed downloads

Find font on website safari, Jan 09, 2019 � Add the Google chrome extension, or add the Safari extension (we Apr 18, 2014 � How to troubleshoot font problems in OS X Fonts are not just files, Google's in-house Roboto is the most downloaded font on the Google Fonts If you want to request the mobile version, you can tap go to the Aa icon and� Question: I want to host Material Icons offline for my offline web development project (I will not have internet on the computer where is deployed).

Get Started with the Google Fonts API, You can start using the Google Fonts API in just two steps: most pages don't need very many fonts, and requesting a lot of fonts may make your pages slow to load.) To request the Greek subset of the Roboto Mono font, the URL would be: Decaying, decaying, font-effect-decaying, Chrome, Safari. Caution Use caution when only representing tab content with icons, as an icon’s meaning may not be clear on every topic. Active tab indicators To differentiate an active tab from an inactive tab, apply an underline and color change to the active tab’s text and icon.

Comments
  • 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
  • Good point. Tested it. It makes no difference.
  • I figured it was a long shot but you never know. I've had trouble with specific font files from Google in the past.
  • 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.
  • Maybe check this similar question out. Try putting your font-family: Roboto; in quotes, if you haven't?