#font-face does not work in iOS and Android - css

Question

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#Candara-Regular"); 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):
Hence, I had to "manually" convert this font using some other online solutions. Any ideas on the issue and how to resolve it?

Answer 1

You need to remove the semi-colons after your url-declarations. A semi-colon ends the declaration for the src.
#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;
}