0

Chrome and Safari are showing the (local) be fonts correctly, but Firefox isn't. The code I got from Fontsquirl added ' marks in the code, which I got rid of, but it's still not working:

Original code:

@font-face {
font-family: 'frutigerboldcn';
src: url('frutiger_67_bold_condensed-webfont.eot');
src: url('frutiger_67_bold_condensed-webfont.eot?#iefix') format('embedded-opentype'),
     url('frutiger_67_bold_condensed-webfont.woff') format('woff'),
     url('frutiger_67_bold_condensed-webfont.ttf') format('truetype'),
     url('frutiger_67_bold_condensed-webfont.svg#frutigerboldcn') format('svg');
font-weight: normal;
font-style: normal;

I changed it into:

@font-face {
font-family: frutigerboldcn;
src: url(frutiger_67_bold_condensed-webfont.eot);
src: url(frutiger_67_bold_condensed-webfont.eot?#iefix) format(embedded-opentype),
     url(frutiger_67_bold_condensed-webfont.woff) format(woff),
     url(frutiger_67_bold_condensed-webfont.ttf) format(truetype),
     url(frutiger_67_bold_condensed-webfont.svg#frutigerboldcn) format(svg);
font-weight: normal;
font-style: normal;

Fonts are loaded in the same folder as the stylesheet.

This is part of the stylesheet regarding the navigation:

#navigation .sf-menu a {
display: inline;
display: inline-block;
font-size: 16px;
text-transform: uppercase;
color: #008abf; 
border-radius: 2px;
padding: 0 5px;
height: 26px;
line-height: 26px;
font-weight: normal;
letter-spacing: 1px;
font-family: frutigerboldcn;

How do I fix this? Thanx in advance

nmaier
  • 32,336
  • 5
  • 63
  • 78
Jmimran
  • 1
  • 1
  • Is the stylesheet in the document root? or is it in a subdirectory, like /css/? I'd suggest putting the path relative to the document root in the url statements. – user2658774 Sep 17 '13 at 16:25
  • Have a look at the syntax-highlighting above - did you recognize something? Do you really think Fontsquirrel adds `'` marks for all the thousands of users, which everyone then has to remove ...!? Are all your files (html, css and the font files) really in the same directory? And is every font file present and delivered to the browser? – Netsurfer Sep 17 '13 at 16:26
  • 2
    I think all you need is in this link: **[css @font-face not working with firefox, but working with chrome and IE](http://stackoverflow.com/questions/2856502/css-font-face-not-working-with-firefox-but-working-with-chrome-and-ie?rq=1)** – 01e Sep 17 '13 at 16:29
  • @Saber Haj Rabiee: The answer you linked to has something to do with trying to load the font files from **local** resource. Same problem may occur when using absolute URIs. Neither is the case here. – Netsurfer Sep 17 '13 at 17:11
  • Just a wild guess, but if the font is really bold, couldn't Firefox reject it because it wants to show its text non-bold? Test it with a bold font weight. – Mr Lister Sep 18 '13 at 07:00

2 Answers2

0

Put the following in your .htaccess and all will be fine, at least on modern FF versions.

<FilesMatch "\.(ttf|otf|eot)$">
    <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

Go here for the full discussion on Stack Overflow: CSS @font-face not working with Firefox, but working with Chrome and IE

Community
  • 1
  • 1
Adriano Resende
  • 2,549
  • 1
  • 30
  • 34
0
@font-face {
    font-family: 'ArialRounded';
    src: url('ArialRounded.eot');
    src: local('ArialRounded'), url('fonts/ArialRounded.eot'); /* for firefox */
    }

@font-face {
    font-family: 'ArialRounded';
    src: url('ArialRounded.woff') format('woff'),
    src: local('ArialRounded'), url('fonts/ArialRounded.woff'); /* for firefox */
    url('ArialRounded.svg#ArialRounded') format('svg');
    src: local('ArialRounded'), url('fonts/ArialRounded.svg'); /* for firefox */
    }
John Ostrowick
  • 59
  • 1
  • 2
  • This works for me, but YMMV. The reason is that firefox is paranoid and thinks that if you're not giving http:// with the server name in the url of the font, that you're doing cross-site scripting – John Ostrowick Nov 14 '13 at 09:26