CODEWITHSUNDEEP
cssgoogle-chromefirefoxfont-face
user1869935
user1869935

Reputation: 759

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

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?

Upvotes: 1

Views: 3980

Answers (4)

Adriano Resende
Adriano Resende

Reputation: 2619

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

Upvotes: 1

Mike Ratcliffe
Mike Ratcliffe

Reputation: 1025

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.

Upvotes: 1

user1869935
user1869935

Reputation: 759

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

Upvotes: 0

Nani
Nani

Reputation: 224

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');
}

Upvotes: -1

Related Questions