@font-face not working - please help!

Hi all,

I’m trying to use @font-face to add a custom font to the site I’m building. I’m brand new at all this but I just can’t see why it’s not working.

CSS


@font-face {
	font-family: talldark;
	src: local ("talldark.ttf") url("talldark.ttf") format ("truetype");
}
#menubar {
	height:40px;
	width:100%;
	background-color:#685B3E;
	font-family:talldark;
	color:#FDF7C4;
}

HTML


<div id="menubar">
this should be tall dark and handsome...
</div>

As I understand it the CSS should link the ‘talldark’ font locally using @font-face and then I should be able to merrily assign it, as above, in the #menubar div.

Here’s a link:

http://samcampsall.chrisfulton.co.uk/JoeSingh/JoeSinghDivsTemplate.html

You’ll see there the menubar div directly above the png image I’m trying to replace and my text in… Times New Roman.

Just to confirm that ‘talldark.ttf’ is in the right place:
http://samcampsall.chrisfulton.co.uk/JoeSingh/talldark.ttf

Like I said, I don’t really know why it’s not working - I’ve checked the above in FF/Chrome/Opera/Safari/IE8. Could it be to do with my doctype? Or, I’m using MS Sharepoint 2007 to edit in - is it anything to do with that? Or…!!!

Any thoughts?! Thanks in advance :slight_smile:

I think adding a comma might do the trick:

src: local ("talldark.ttf")[COLOR="RED"],[/COLOR] url("talldark.ttf") format ("truetype");

Different browsers expect different formats for the font.

To get @font-face to work across all modern browsers you should supply the font in .EOT .WOFF and .SVG formats as those are the three alternative formats that different browsers expect to use for embedded fonts.

da deef - sadly, the comma didn’t do the trick :frowning: Was hoping it was something simple like that! Which it probably still is…

felgall - thanks for the heads up - I was aware that I would need to try and provide this in various fileformats but trying to get at least one working first!

Any other ideas?!..:confused:

Wooops, i tried omitting the comma on one of my sites and it did break the design.

Maybe you could try using Paul Irish’s “bulletproof” @fontface syntax to see if it fixes the problem:

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

(Full explanation Here)

You can also go to FontSquirrel to convert your font, it can even generate the syntax for you.

That FontSquirrel tool is amazing and has done the trick! (Except in IE wierdly - will try and fix it before I post links/grovel for help). I converted the TTF and used the syntax it generated to be on the safe side and it works (in FF/Chrome/Safari/Opera).

Strange though, because after getting it working I tried cutting different filetypes out the CSS to see where the problem had been and it seemed it wouldn’t work without the .woff,.ttf and .svg files all being declared. Is that normal?

Thanks Da Deef for the heads up - you’re prince among men! - will post some links later hopefully :slight_smile:

Thanks again for your help both :slight_smile:

I’ve updated the live link supporting the font:

http://samcampsall.chrisfulton.co.uk/JoeSingh/JoeSinghDivsTemplate.html

If anyone can shed light on why that’s not working in IE then that would be awesome!

Also, although the menu bar is now live text, rather than the previous .png image, I’ve quite badly coded in the ‘bullet’ points! I know I can do this by specifiying an image for a UL in the ‘Menubar’ div CSS, but I haven’t been able to get it working as yet. Any tips?

Feel free to tell me I’m lazy and I should go and figure these out for myself :blush: I know that’s true but I have to get on with some paid work this afternoon!

Thanks

No problem :slight_smile:

ul
{
  list-style-image:url("/images/image.gif");
}

da-deef - thanks for the tip - I was aware it was something like that, but it’s not quite doing the trick! Seems every simple thing I want to do is hard work! I’ve started a new thread with where I’m at

http://www.sitepoint.com/forums/showthread.php?p=4801020#post4801020

thanks again :slight_smile: