I am currently in the middle of a build, and I have come across a bit of an issue regarding custom web fonts.

I have used them in the past and never had this problem before, so I kinda of confused as to what is going on here.

 

The webfonts I have uploaded to the webspace, and linked up through CSS. Using .eot and .TTF files.

 

The font is working fine however in Chrome, IE, Safari. However, not in Firefox.

 

I'm not sure whether this is to do with me being on Mac or not but it seems odd how it's only Firefox where I am getting this issue.

 

here is my code:

 

<style type="text/css">
@font-face {
font-family: abadi;
src: url("/css/fonts/abadi-mt-condensed-extra-bold-2.eot")
}

@font-face {
font-family: abadi;
src: url("/css/fonts/abadi-mt-condensed-extra-bold-2.TTF") format("truetype")
}
</style>

 

If anyone can help, then that would be great. Many thanks!

Edited February 13, 201214 yr by Renaissance-Design
Please use the code button or tags to format your code.

you need your WOFFs http://www.fontsquirrel.com/fontface

The @font-face syntax you have used is not what I would consider the best way to setup your fonts. It could be your problem.

 

Here are a few resources

http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

http://readableweb.com/new-font-face-syntax-simpler-easier/

 

The previous post says you need to have a WOFF file but that is not true. All of the browsers you care about will use the TTF except IE 4+ which will support the EOT file you have already. I think all you need to do is fix up your @font-face declaration and you are good to go.

 

Now if you do find that your file still does not render in Firefox it could be an issue with the font file. But lets cross that bridge if you come back without what I have suggested working for you

 

Brad

Thanks for getting back to me, I will be sure to try both, as I have been away in Belgium I shall take a look at this today and let you know how I get on.

 

Thanks again

I have tried everything with the above, still same results. Font appears blurry on Firefox but not in others.

 

I also, downloaded a custom web font from Google API using the coding, still the same results.

 

Is there something in Firefox which is making it look like this? I've read somewhere about a 64 bit or something?

Post a link publicly so we can see the code and the page itself. Post screenshots of what you are seeing in Firefox and let us know which OS/Browser version it is.

Post a link publicly so we can see the code and the page itself. Post screenshots of what you are seeing in Firefox and let us know which OS/Browser version it is.

 

This is what I am getting in Firefox,

 

however in Chrome I get,

 

HELP?!

This is what I am getting in Firefox,

 

however in Chrome I get,

 

HELP?!

 

Interesting! From the pictures it looks like firefox displays the font thicker. Could it be that you have a font-weight declaration that firefox reads but chrome ignores?

 

Perhaps try with:

h1 {
font-weight: 400!important;
}

Interesting! From the pictures it looks like firefox displays the font thicker. Could it be that you have a font-weight declaration that firefox reads but chrome ignores?

 

Perhaps try with:

h1 {
font-weight: 400!important;
}

 

 

WHAT A GOD! Absolutely overwelmed! Have tried so many different things to get this to work, and you've come up with it buddy.

 

How on earth did I not think of this.

 

So there's your fix guys, if anyone else is having this problem, add a font-weight with !important to it. BUG FIXED! Thanks again!

WHAT A GOD! Absolutely overwelmed! Have tried so many different things to get this to work, and you've come up with it buddy.

 

How on earth did I not think of this.

 

So there's your fix guys, if anyone else is having this problem, add a font-weight with !important to it. BUG FIXED! Thanks again!

 

 

Happy to help