@font-face does not work in iOS and Android

For one of my current web projects I’m using a Candara font, here’s how I refer to it in my stylesheet:

@font-face {
font-family: "Candara",sans-serif;
    src: url("../fonts/Candara_gdi.otf"); format('otf'),
         url("../fonts/Candara_gdi.woff"); format('woff'),
         url("../fonts/Candara.woff2"); format('woff2'),
         url("../fonts/Candara_gdi.eot"); format('eot'),
         url("../fonts/Candara_gdi.ttf"); format('truetype'),
         url("../fonts/Candara_gdi.svg#svgCandara_gdi"); format('svg');
font-style: normal;
font-weight: normal;
}

After testing the site on mobile devices, I’ve noticed that Candara is not showing (the mobile devices render the fallback font, which is in this case ‘sans-serif’). On the other hand, there’s no problem with this font on all other desktop browsers, including the notorious IE family and Mozilla.
I’d like to mention that when I wanted to generate a webfont package here, there was a warning saying that Microsoft has blacklisted this font (see the screenshot of the warning):

enter image description here

Hence, I had to “manually” convert this font using some other online solutions. Any ideas on the issue and how to resolve it?


Source: css

Leave a Reply