When we are using CSS @font-face for WordPress, we usually don’t get the desired result that we may be expecting while we are using Mozilla Firefox.

Firefox 3.5 supported TrueType and OpenType fonts. In Firefox 3.6 support for a new font format – the Web Open Font Format, or WOFF is been added. You can use this font format to work for WordPress if you are using Firefox.

You can convert you fonts to woff format from http://www.fontsquirrel.com/fontface/generator

After you get your font coverted use the following code to import your fonts for all browsers.

@font-face {
  font-family: GentiumTest;
  src: url(fonts/GenR102.woff) format("woff"),
       url(fonts/GenR102.ttf) format("truetype"),
       url(fonts/GenR102.eot) format("embedded opentype");
}

If this does not works use the following (this works for me):

@font-face {
font-family: Traditionnel;
src: url(TraditionellSans-Bold.ttf);
[font-weight: bold];
[font-style: normal];
} /* This will work for Chrome, Firefox 3.5 and most of the other browsers. */
@font-face {
font-family: Traditionnel;
src: url(TraditionellSans-Bold.eot);
[font-weight: bold];
[font-style: normal];
} /* This will work for Internet Explorer. */
@font-face {
font-family: Traditionnel;
src: url(traditionellsans-bold.woff);
[font-weight: normal];
[font-style: normal];
} /* This will work for Firefox 3.6. */

I use them all together so that they work on all the browsers with the same sequence as it is, else it does not works for firefox.

Tagged with:
 

1 Response » to “CSS @font-face not working on Mozilla Firefox for WordPress”

  1. […] added. You can use this font format to work for WordPress if you are using Firefox Read more: CSS @font-face not working om Mozilla Firefox for WordPress … Tags: 3-5-supported, 3-6-support, firefox, format, woff, wordpress-if-you, work-for, you-are […]

Leave a Reply