Embed fonts in webpage?

[irish-ed]

Hi all,

Very much a newbie question. If I use some nice fonts I found on my website, is there any way that the users can view these fonts on their browsers if they are not already installed on their machine?

[Tailslide]

Nope - not cross-browser as pure text.

You'd have to use image replacement methods of some sort.

All you can do for pure text is make suggestions in the CSS - listing the preferred font and a couple of alternatives but there's no way to ensure that the end-users see what you want.

[neron-fx]

Hi irish-ed,

There is no real cross browser compatible way of doing it. If you arent too worried about usability/ accessibility etc etc you could try Microsoft Weft.

With this utility, you can create one EOT file for each font you wish to embed. You then code the pages to point to the font files by adding a <STYLE> element to the portion of the page.

<STYLE >

@font-face {

font-family: fontname;

font-style: italic;

font-weight: normal;

src: url(fontname.eot); }

</STYLE>

Being a web purist I would advise against this, the web accessible fonts were chosen for a reason! Because they are very Readable and scale up and down well. Stick with fonts that users are sure to have. Plus currently, as far as I'm aware only Safari 3.1 and Firefox 3 support the feature with Opera's version in development.

Its the only way to fully ensure accessibility and usuability. If you really want a fancy font for sub heading etc etc you can make an image with a good 'alt' and 'title' attribute, although again this is not ideal.

Plus there is the ethical issue of having 'paid-for' fonts accessible from web directories. Its a pirating nightmare, which is probably why browsers have been so slow on the uptake and adoption of these techniques. It would be a legal nightmare should anyone kick up a stink about it all.

Hope this helps

[AutisticCuckoo]

Another aspect: don't assume that every visitor will want fonts installed on their computers.

[neron-fx]

Good point AutisticCuckoo,

I get annoyed when sites expect me to install any plugins let alone fonts as well! That would do my head in. I groan when a site tells me to upgrade my flash player

[AutisticCuckoo]

I hope that when Opera implements support for @font-face they will include an option to disable it.

[neron-fx]

yeah, that will be getting turned straight off!!

[irish-ed]

Thanks guys - I suppose I should use only default fonts for content. It is strange though that for all the fonts out there for free and for sale, the only real way display them on your site is via images.

[Kevin Boss]

http://facelift.mawhorter.net/

[neron-fx]

yeah I agree, but that is the nature of the game. The nets primary purpose is to provide information and good valid content. By hampering users into having fonts installed or access to additional plugins goes against that very simple rule and I personally think should be avoided.

Fancy fonts and wacky layouts are for print and other media. Dont get me wrong, I'm primarily a developer but I also have a keen eye for design and love working with Photoshop and Illustrator. I too sometimes wish the web could be more pretty, BUT I think you can provide a nice design even if simple which looks good and does not hamper users or diminish accessibility or usability... I do believe that the bottom line is CONTENT IS KING!

[felgall]

You can always suggest the fancier fonts in your CSS so that those that have them installed will see the page in that font while those that don't will see the page in your second or third choice of font.

[Black Max]

You can always suggest the fancier fonts in your CSS so that those that have them installed will see the page in that font while those that don't will see the page in your second or third choice of font.

That's the way to go, I think. If you're using fonts that are free for distribution, you can even offer them on your page for download so your page will "display properly," but that's going a bit overboard. You're right about the plethora of excellent fonts out there that we can't use because of the problem you cite. As of now, there's no good solution.

Me, I'm still trying to find a free, legitimate copy of Helvetica Thin for myself.

[ditch182]

As others have said, the semantic web is all about separating form from content. You really want to make sure that your content is accessible even if users don't have the proper fonts or plugins or whatever...

[felgall]

Some people will be listening to your page instead of viiewing it or will be reading it in braille. In those instances font is irrelevant anyway.

[estudiospiral]

what about sIFR? as long as i know it works, but how recommended it is?

[ditch182]

sIFR looks pretty nice. I haven't used it yet, mainly because I just don't think fonts are that important. If I have something that I really need in a specific font, then I turn it into a graphic.