font-face bold doesn't work in Chrome and Firefox

Question

I am loading a font into my CSS by doing this:

@font-face{
    font-family: arialNarrow;
    src: url(../fonts/ArialNarrow.ttf);
    font-weight:normal;
    font-style:normal;
}
@font-face{
    font-family: arialNarrow;
    src: url(../fonts/ArialNarrowBold.ttf);
    font-weight:bold;
    font-style:normal;
}
@font-face{
    font-family: arialNarrow;
    src: url(../fonts/ArialNarrowItalic.ttf);
    font-style:italic;
    font-weight:normal;
}
@font-face{
    font-family: arialNarrow;
    src: url(../fonts/ArialNarrowBoldItalic.ttf);
    font-weight:bold;
    font-style:italic;
}

The normal style works in all browsers.

the bold and italic styles work correctly ONLY in IE9, but not in Chrome and FireFox. Am I doing something wrong?

I have never used `font-weight: bold;` in the `font-face` it self but I have used `font-weight: bold;` in a `css` class before and it never had problems in chrome/firefox. — Josh Powell, Oct 28 '13 at 19:01
If you are importing a font that is already bold, I believe you'll just want your font-weight to be normal. — 2507rkt3, Oct 28 '13 at 19:02
Check out Microsoft instructions on licensing and using Arial Narrow on web pages: http://www.microsoft.com/typography/fonts/family.aspx?FID=22 — Jukka K. Korpela, Oct 28 '13 at 19:35
Sorry guys, but that is not correct. CSS3 allows you to define the "bold" or "italic" for a font in the way I did it, you can see a working example in the W3C website. So the problem comes from somewhere else. — user1869935, Oct 28 '13 at 19:44

Mike Ratcliffe · Answer 1 · 2013-10-29T10:49:45.437

Looking at Firefox's Web Console I see the following CSS errors (amongst others):

background:#fff, estilos.css:32

downloadable font: table 'cmap': failed to parse table (font-family: "arialNarrow" style:normal weight:bold stretch:normal src index:0) source: http://www.meengoo.com/test/fonts/ArialNarrowBold.ttf estilos.css

downloadable font: rejected by sanitizer (font-family: "arialNarrow" style:normal weight:bold stretch:normal src index:0) source: http://www.meengoo.com/test/fonts/ArialNarrowBold.ttf estilos.css

The cmap errors mean that the font is corrupt. You are probably best to use a service like http://www.font2web.com/ to fix the font and convert it to appropriate formats. It also creates CSS that you could then tweak to give you the correct bold and italic rules.

You are correct that font-family does not need a unique name when you are defining @font-face rules (in fact, when defining font variants it shouldn't). The only problem I can see is that you have some extra font-weight and font-style rules.

Try this:

@font-face{
    font-family: arialNarrow;
    src: url(../fonts/ArialNarrow.ttf);
}
@font-face{
    font-family: arialNarrow;
    src: url(../fonts/ArialNarrowBold.ttf);
    font-weight:bold;
}
@font-face{
    font-family: arialNarrow;
    src: url(../fonts/ArialNarrowItalic.ttf);
    font-style:italic;
}
@font-face{
    font-family: arialNarrow;
    src: url(../fonts/ArialNarrowBoldItalic.ttf);
    font-weight:bold;
    font-style:italic;
}

Note that the order is important, the bold/italic style must come last. Doubters should refer to http://www.metaltoad.com/blog/how-use-font-face-avoid-faux-italic-and-bold-browser-styles to see why it should be done this way.

Yes, I made sure of that, but still, FireFox is not "respecting" the custom bold, it seems it is just switching to the default Arial and then making it bold which is alot larger than I want. I just uploaded the page for you to see here => http://www.meengoo.com/test/ Any other idea? — user1869935, Oct 28 '13 at 22:31
The text is the one in the right, the green gif button that reads "accedé al precio oferta" — user1869935, Oct 28 '13 at 22:32

score 1 · Answer 2 · edited May 23 '17 at 11:47

1

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

edited May 23 '17 at 11:47

Community

1
1

answered Oct 31 '13 at 12:51

Adriano Resende

2,549
1
30
34

score 0 · Accepted Answer · answered Oct 29 '13 at 00:30

0

I figured it out. I downloaded the font again, it seems that the font itself had an issue.

answered Oct 29 '13 at 00:30

user1869935

717
2
10
23

score -1 · Answer 4 · answered Oct 28 '13 at 19:16

As Aniskhan pointed out, the font-family should have a unique name for itself.

Also, to make it work across all the browser add all the different formats including .ttf.

A sample CSS piece for @font-face,

@font-face {
    font-family: 'LatoHairline';
    src: url('/fonts/lato-hairline-webfont.eot');
    src: url('/fonts/lato-hairline-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/lato-hairline.woff') format('woff'),
         url('/fonts/lato-hairline.ttf') format('truetype'),
         url('/fonts/lato-hairline.svg#LatoHairline') format('svg');
}

@font-face {
    font-family: 'LatoBold';
    src: url('/fonts/lato-bold-webfont.eot');
    src: url('/fonts/lato-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/lato-bold.woff') format('woff'),
         url('/fonts/lato-bold.ttf') format('truetype'),
         url('/fonts/lato-bold.svg#LatoBold') format('svg');
}

Sorry guys, but that is not correct. CSS3 allows you to define the "bold" or "italic" for a font in the way I did it, you can see a working example in the W3C website. So the problem comes from somewhere else. — user1869935, Oct 28 '13 at 19:41

font-face bold doesn't work in Chrome and Firefox

4 Answers4