Embedding fonts in CSS?

How to? Or why not?

[hanglide]

I'm trying to develop a logo for a page using only CSS. I'm pretty happy with the results but in order to make it the way I want I need to "embed" a font. In searching for embedded fonts in CSS I've found a few VERY dated references. (IE4 & NS4 days)

I was wondering if anyone here used embedded fonts?

The font is freeware (truetype) and only 26k so it's not really much larger than if I made the logo an image.

I don't really have any personal preferences and accessibility probably doesn't matter for a logo anyway but I kind of thought.. "If I can pull it all off in CSS... Why not?"

Comments are appreciated.

Thanks

Scott

[Setek]

As far as I can remember, the way to embed fonts was to find a converter to convert your fonts to

.eot

, before using

@font-family { 'Font'; src: url('/fonts/font.eot'); }

, but from what I remember this didn't work too well (my hazy memory seems to tell me it didn't work in IE 6.)

More often, people use sIFR (Scalable Inman Flash Replacement, Google it if interested) to create rich type on a website, which is part Javascript part Flash.

Or, if it is just a logo, then just CSS Image Replacement, so the backing text is still there for Accessibility.

[Xapti]

Other than EOTs And Microsoft WEFT, there was the other one, designed for Netscape. Forgot what it's called, but it's totally gone extinct.

Do yourself a favor and MARK MY WORDS:
Microsoft WEFT and EOT fonts are HELL to deal with, and isn't necessary anyways.
I dealt with it and was completely dissatisfied with it. It's why you never see anyone using embedded fonts. Just say no!

Oh yeah, I almost forgot. There's one other reason why it's ridiculously stupid to use it... it's not supported by any browser that I know of except IE-based (unsure of the versions, I know v6 works though).

If you absolutely NEED DYNAMIC content being displayed in a special font, you can use this cool script that some guy made which uses PHP (I think it was) to take your font, and your text (and I suppose size), and make it an image. It was very impressive. (I can't remember if it used Javascript as well, but it's possible)

If it's not dynamic content, just make the images yourself in an image program... since it will never change. Don't forget to include the ALT text attribute for the image!

Like Setek said, there's Flash (which I suppose would have to work with Javascript for most situations), Since it can display custom fonts... but that's probably just messier. You'll have all sorts of flash objects running around (or maybe just one, in your case :P), as well as you may need the person to have javascript enabled, which never helps.

[edited by: Xapti at 5:13 am (utc) on May 10, 2007]

[londrum]

If you absolutely NEED DYNAMIC content being displayed in a special font, you can use this cool script that some guy made which uses PHP (I think it was) to take your font, and your text (and I suppose size), and make it an image. It was very impressive. (I can't remember if it used Javascript as well, but it's possible)

i can testify about that as well. i have used it before and it works pretty well. you can use whatever font you like and all you have to do is upload the font file to your server. then you just write out your HTML exactly like normal, and it automatically converts it into an image using your chosen font.
you can set it to change different tags as well. so you could make it change everything inside a <h2> tag, for example.
you can get it from the 'a list apart' website. just do a search for 'dynatext'

[mandarseo]

But is it really that important to have experiment like this when simply image will do much better. Here you want to upload the file which will make the webpage of same size that would with image. If you thinking from experimentation point of view then it's ok. Otherwise use just plain image with alt tag and experiment font to image practical some time later.

With regards,
Mandar Thosar

[Dabrowski]

I looked into this a while ago. I used M$'s WEFT ok for IE, but for others it's still possible, you have to use a different format, PFR or Portable Font Resource.

There used to be a free program to generate the PFR files, but the reason I didn't use embedded fonts was the only program I can now find is by Adobe and costs a few hundred dollars. OK if you'll think you'll get your money's worth out of it.

Here's a site that shows the 2 different methods:
[morovia.com...]

mandarseo, if the seo in your name means Search Engine Optimisation, I'm highly disappointed in your response. If not, let me explain. Search Engines rank your page based on it's content. If you use an image instead of text, the search engine can't read your page, hence it misses out.

My oppinion, if you want to do little bits like titles, use CSS image replacement, as Setek mentioned, if you really want to do an entire page, I personally would use embedded fonts. At least the IE way won't cost you anything.