Hi,

I've never needed to ask on a forum before because I have always found the answer, but I really can't find anything on this.

I am using font face to use a non-standard font on my website (jameslane.co.uk) and it works fine offline, but since putting all the files online, it just won't work! Does anyone know why?

it just won't work! Does anyone know why?

Absolutely no idea at all!

Would you like to give us a clue, like a URI for instance?

Sorry to be a noob, but what's a URI?

There isn't really much I can give! Here is the coding for the fontface:

"@font-face
{
font-family: lane;
src: url('LANE.eot');
src: local(my_font), url('LANE.ttf') format('opentype');
}"

I then link the stylesheet to whichever page I am using it for (the whole website really!)

Like I say, it's all working offline, i open the index file and it all looks normal, "http://jameslane.co.uk/Screenshot.png", but then when I have put all the files into my public_html folder online, in the same structure, because all the files are in the same folder, it doesn't work!

Oh and thanks for replying so quickly, I was looking around the site for any other problems similar.

URI = Uniform Resource Identifier

Internet Address.

I'd suggest you check the case of the filenames

Ah so clearly I can't have capitals in my filenames! PROBLEM SOLVED!

Cheers Chris, big help! Blackpool too, literally a stone's throw away! Thanks again!

Ah so clearly I can't have capitals in my filenames

You can, however *nix OS is case sensitive, whereas Windows OS is not.

if it works fine offline, it must be something wrong, check the filename or the filepath.

Hello everyone,

I've been reading this site for years and always find the answer to my question usually before I even know I need to ask it. But I'm having the worst experience trying to get font-face to work. It's for my university application so I'm just starting to freak out. I've read everywhere I can yet my code still doesn't work.

Site is here : www.kylejamespatrick.net

I'm trying to use the League Gothic font for my title. This is my code :

@font-face {  
  font-family: "League Gothic";  
  src: url(http://www.kylejamespatrick.net/wp-content/themes/Starkers/css/fonts/league_gothic.eot); /* IE */  
  src: local("League Gothic"), url(http://www.kylejamespatrick.net/wp-content/themes/Starkers/css/fonts/league_gothic.ttf) format("truetype"); /* non-IE */ 
}

Here is how I'm calling it :

.header { font-family:"League Gothic"; color:#FFF;}

I've followed so many guides, converted the fonts into various forms but it just won't work without having the font's installed locally... I'm using absolute URL's as my site seems to hate anything local.

Please help, I've even tried typeface.js and that still won't do anything.

Chrome likes it, but IE is shaking it's head at me. Haven't tried the rest as I've read IE is the first one to try and fix

Try to exclude absolute path from font source url. Use relative path.

Just to the IE?

@font-face {  
  font-family: "League Gothic";  
  src: url(fonts/league_gothic.eot); /* IE */  
  src: local("League Gothic"), url(http://www.kylejamespatrick.net/wp-content/themes/Starkers/css/fonts/league_gothic.ttf) format("truetype"); /* non-IE */  
}

Still nothing with IE... what can you guys see?
www.kylejamespatrick.net

No joy with that method.

Working in Chrome and Mozilla, but not IE... and IE is meant to be the one that supports this? My poor brain. Day 4 of font-face is miserable...

Appears to be working just fine in IE7, so what version are YOU using?

Hi,
I thinks css overrides your font face please check whether you have written twice for single class

Many times you run into cross browser compatibility issues, such as the ones you have now. I personally have switched to a Javascript called "Cufon".

It can be a little lagging on page load if you're using Cufon for every bit of text on the page, but for headers and tag lines, it works marvels.

Check it out here:

https://github.com/sorccu/cufon/wiki/About

And obtain it here:

http://cufon.shoqolate.com/

Good luck!

I think you should write the code again. Try this one


@font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot');
src: local('?'),
url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}