0

When you add a webfont on a website, you've probably added this line of code

@font-face {
  font-family: "FontAwesome";
  src: url('../font/fontawesome-webfont.eot');
  src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'),
    url('../font/fontawesome-webfont.woff') format('woff'),
    url('../font/fontawesome-webfont.ttf') format('truetype'),
    url('../font/fontawesome-webfont.svg#FontAwesome') format('svg');
  font-weight: normal;
  font-style: normal;
}

My question is which of these (ttf, eot, woff, woff2 and SVG) is loaded when you're watching a website on a retina display?

Warface
  • 5,029
  • 9
  • 56
  • 82
  • 1
    Doesn't that primarily (and possibly only) depend on what browser I am using? – Jongware Aug 31 '15 at 17:38
  • So, by my example above, the first one to load should be the SVG if not supported, it's the TTF, then the WOFF and finally the EOT? Since SVG is supported on Safari, it should be the SVG that is loaded on retina display, am I right? – Warface Aug 31 '15 at 17:43
  • Mentioned fonts are vectors. Retina does not count here. As per previous comment it depends on browser (the loaded font) http://stackoverflow.com/questions/12360592/custom-web-font-not-working-in-ie9 – Marek H Aug 31 '15 at 18:02
  • Ok thought it was using fallback like in the example : `background:#fff; background:rgba(255,255,255,1);` Which in IE8, the `rgba` can't be used so it fallback to the `background:#fff` instead. – Warface Sep 01 '15 at 12:52

0 Answers0