CODEWITHSUNDEEP
cssfirefoxfontsfont-face
John Xc
John Xc

Reputation: 79

firefox @font-face doesn't work

I am trying to use custom icon font on my blogger blog. If I understood correctly firefox requires the download file to be from the same domain. It's working fine on my chrome. I am also using google web fonts that work similarly. I am hosting the icons with google code.

Here: http://www.tipsontricks.com/p/test.html Chorme and others working but not firefox

Here's the code i am using

@font-face {
    font-family: 'JustVector';
    src: url('xyz.eot');
    src: url('xyz.eot?#iefix') format('eot'),
         url('xyz.woff') format('woff'),
         url('xyz.ttf') format('truetype'),
         url('xyz#webfontkw9J4lGf') format('svg');
    font-weight: normal;
    font-style: normal;

}

.iconfont{

font-family: 'JustVector';
}

Any help would be appreciated :)

Upvotes: 2

Views: 6535

Answers (4)

Mugé
Mugé

Reputation: 472

The above answers still do not work for me in FF, however, my font worked in all the other browsers.

Google Webfonts had the same font I was looking for, but the quality was ridiculously low.

@Kate, the FireFox "Prefences" on using my own font was already as default, for which I would have been surprised if it were not.

It remains a mystery to me, why a developed browser like FF would not have a fix to the problem even after 2 years. My FireFox is up-to-date with the latest.

Thank you all for making my day a little easier.

Upvotes: 0

Kate L
Kate L

Reputation: 11

I just downloaded Firefox 19.0.2. I had a problem using @font-face with a Font Squirrel webkit. The fonts wouldn't display properly in Firefox, but they were fine in Safari and Chrome.

Turns out there is a hidden preference in Firefox that needs to be checked in order for Firefox to display custom fonts on a web page.

Firefox Preferences > Content > Fonts & colors > Advanced button > and check the box "Allow pages to use their own fonts, instead of my selections above"

This solved the problem for me, after spending about 4 hours today trying various code alterations that didn't work. Aaargh!

Now Firefox displays the fonts the same as Safari and Chrome.

Upvotes: 1

zenkaty
zenkaty

Reputation: 1548

This is the format I use:

@font-face {
    font-family: 'Blah';
    src: url('/fonts/blah-webfont.eot');
    src: url('/fonts/blah-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/blah-webfont.woff') format('woff'),
         url('/fonts/blah-webfont.ttf') format('truetype'),
         url('/fonts/blah-webfont.svg#Blah') format('svg');
    font-weight: 300;
    font-style: normal;
}

body {font-family:'Blah'}

Upvotes: 2

Krycke
Krycke

Reputation: 3186

You should be using this syntax:

@font-face {
  font-family: 'WebFont';
  src: url('myfont.eot?#') format('eot'),  /* IE6–8 */
       url('myfont.woff') format('woff'),  /* Firefox 3.6+, IE9, Chrome 6+, Safari 5.1+*/
       url('myfont.ttf') format('truetype');  /* Safari 3—5, Chrome4+, Firefox 3.5, Opera 10+ */
}

Here's a nice Paul Irish blog post,

and there's the syntax on Css3Please

Upvotes: 3

Related Questions