5

this is how the font looks when I visit the webiste the first time

enter image description here

Then if I right click and select "reload page", the fonts are displayed correctly

enter image description here

this happens only on macs using safari. works fine in other browsers.

link in index.html header

<link rel="stylesheet" href="http://fonts.googleapis.com/icon?family=Material+Icons">

Any help is aprreciated.

hikizume
  • 578
  • 11
  • 25
  • We will probably need to know how and where you load your fonts. – Vega Jul 14 '17 at 10:14
  • @Vega good catch, thank for that. I've updated the post accordingly. – hikizume Jul 14 '17 at 10:25
  • I am maybe saying 'silly' things. Would it be that you have a slow internet connection? If so I will explain my idea. – Vega Jul 14 '17 at 10:37
  • No suggestion is silly. I don't believe that's the issue, though. – hikizume Jul 14 '17 at 10:55
  • On my mac I have noticed that safari is too quick: it loades my angular app much quicker than chrome. At the point that I cannot test "pre bootstrap loading" part. So might be for yours too, at the first loading the fonts take time to load but it the app loads and they are cached. My would recommend you load your your fonts locally. – Vega Jul 14 '17 at 11:07
  • The same happens to me and I'm loading the fonts locally. Did you fix your problem? – Thiago C. S Ventura Oct 09 '18 at 13:37

1 Answers1

0

Here is how I solved part of the problem: https://stackoverflow.com/a/52763507/783364

And here some details with "preload" fonts and @font-face that saved me a lot: https://stackoverflow.com/a/42683378

Thiago C. S Ventura
  • 2,448
  • 1
  • 29
  • 43