1

I'm having an issue with @font-face in my site with two browsers: Firefox and Chrome.

In Firefox the @font-face rule just doesn't work, it uses the fallback font —Helvetica—

I have declared the font like this at the top of my stylesheet:

@font-face {
font-family: 'pf_centro_sans_proregular';
src: url('http://static.algarabia.com/CDN/fonts/pfcentrosanspro-reg-webfont.eot');
src: url('http://static.algarabia.com/CDN/fonts/pfcentrosanspro-reg-webfont.eot?#iefix') format('embedded-opentype'),
     url('http://static.algarabia.com/CDN/fonts/pfcentrosanspro-reg-webfont.woff') format('woff'),
     url('http://static.algarabia.com/CDN/fonts/pfcentrosanspro-reg-webfont.ttf') format('truetype'),
     url('http://static.algarabia.com/CDN/fonts/pfcentrosanspro-reg-webfont.svg#pf_centro_sans_proregular') format('svg');
font-weight: normal;
font-style: normal;

}

If I type the URI in the browser it download the font without problem, so, the font is there (Opera and Safari displays the site with the right font)

In Chrome suddenly (with some update I guess) the menu changed to the fallback font, yes, just the menu, the rest of the site behaves as expected.

I know the font is there and my CSS shouldn't be that bad because it works in Safari (both, desktop and mobile) and in Opera.

Any hints with this?

Thank you for your time and help.

roymckrank
  • 689
  • 3
  • 12
  • 27
  • Did you actually use the font anywhere? Just doing that seems to work for me (Chrome/OSX) http://jsfiddle.net/UhuVB/ – brbcoding Oct 08 '13 at 22:39
  • Is your static.algarabia.com server sending the right headers to allow cross-site access to the fonts? – Boris Zbarsky Oct 09 '13 at 00:29
  • @brbcoding yes, I'm using it in the menu and all the paragraphs. – roymckrank Oct 09 '13 at 15:34
  • @BorisZbarsky I have moved the font to the main server and the problem persists – roymckrank Oct 09 '13 at 15:48
  • I managed to make it work in firefox following this answer: http://stackoverflow.com/questions/2856502/css-font-face-not-working-with-firefox-but-working-with-chrome-and-ie?rq=1 I have added an .htaccess file to the folder where the font is and firefox now display the site as it should be. – roymckrank Oct 09 '13 at 16:04

1 Answers1

1

It should just be a matter of changing the font url from http://fonts.googleapis.com/css to https://fonts.googleapis.com/css to secure this link.

Michael Rader
  • 5,839
  • 8
  • 33
  • 43