Embedded Web Fonts?

[Tittytweaker]

Hey guys. I'm trying to figure out how to get this font to appear in the footer on my website. I'm not really familiar with the @font-face thing - but I've been following the directions I've read as best as I can and can't seem to get it to work.

@font-face { font-family: bebas-neue; src: url('fonts/bebas-neue.eot'); /* For IE */ src: local('bebas-neue'), url('fonts/bebas-neue.ttf') format('truetype'); /* For non-IE */ }

^That's what I've got in my CSS file. When I visit my site the pink text in the footer looks like Arial or a similar font, and not the one I'm trying to use.

Advice would be appreciated.

Thanks!

~TT

[Tent Pitcher]

@font-face defines a new font family:

@font-face {
    font-family: "whatever";
    src: url('../fonts/whatever.ttf') format("truetype");
}

In the above case, we now have a font definition called "whatever" that points to the true-type font "whatever.ttf".

Once defined, it can be called through CSS like any other font:

p {
    font-family: "whatever";
    font-size: 14px;
}

Make sure that your font file paths are correct, that the font file exists, and that the pink footer text is using the correct font definition.

[Tittytweaker]

Gah, I'm an idiot. That's what I get for working on my site when I'm dead tired. I think the font paths were incorrect.

Thanks!

[Tittytweaker]

Any idea why it's not working in IE? I know IE is terrible but I'd like it to still work in there too since it does in all the other browsers.

[Tent Pitcher]

What version of IE?

[Tittytweaker]

Versions 8 and 9.

[Tent Pitcher]

Ok, just to recap, if you already have an EOT file along with your TTF, your CSS should look like this:

@font-face {
    font-family: "whatever";
    src: url('../fonts/whatever.ttf') format("truetype");
    src: url('../fonts/whatever.eot') format("truetype");
}

The EOT definition should be last, or you could use a specific directive like this:

<!--[if IE]>@font-face {
    font-family: "whatever";
    src: url('../fonts/whatever.eot') format("truetype");
}
<![endif]-->

Anyway, I hate to plug anything MS related, but if you need to convert a TrueType font to EOT for use with IE you can use WEFT to convert them:

http://www.microsoft.com/typography/WEFT.mspx

So make sure that you have the EOT and that it is in the right place and see if IE works properly then.

[Tittytweaker]

When I try the format you just posted, it still doesn't display in IE, and it breaks it in firefox.

When it works in FF, this is how I have it -

@font-face
{
font-family: bebas-neue;
src: url('/fonts/bebas-neue.ttf'),
     url('/fonts/bebas-neue.eot'); /* IE9 */
}

I've seen so many different ways to format it on so many different sites and none of them have worked except that exact way. And even then, it only works in FF and Chrome. I'm not sure what I could be screwing up.

[nixem]

If you don't exactly "get" @font-face property you can use little helpers

Google: "font squirrel" - Useful in cases where you have a random font that you have a version of on the desktop and are able to upload it. Font Squirrel converts your font into all 4 versions you need for different browsers.

If you do not have a font in mind just goto "Google Fonts" its a webfont site where you can choose form thousands of fonts and it outputs the proper code for you to use the fonts on your site, you can choose to let google host it as well. Also they show Page Speed (Load Time) Impacts based on each font

[Tittytweaker]

Cool. Took a little messing around but I managed to get it. Thanks a million!