Welcome to WebmasterWorld Guest from 35.172.217.40

Forum Moderators: open

Message Too Old, No Replies

Embedding a font into html

Help! I can't get my font to embed to use it for live text

     
12:09 pm on Apr 7, 2004 (gmt 0)

New User

10+ Year Member

joined:Apr 7, 2004
posts:2
votes: 0


Hello Everyone, a good friend recommended you.
My client has asked me to use specific true type fonts in the design of their site and I want all live text to appear in 1 of 2 variations of these fonts. (I am trying for DDA compliancy and graphics are not an option) We've tried to embed them in html (for use on IE). I am about to try an embedding tutorial from an earlier post I just found. Keep you posted.
Al

[edited by: AliciaM at 12:30 pm (utc) on April 7, 2004]

12:23 pm on Apr 7, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 8, 2003
posts:1429
votes: 0


Hi AliciaM, welcome to webmasterworld.

Font embedding is not well supported by browsers and it adds unnecessary weight to your pages.

Howvere, CSS allows you to specify many possible fonts and they will be matched in the order that you give them. So you might do something like this...


body {
font: 85% "Trebuchet MS", Arial, Helvetica, Verdana, sans-serif;
}

So "Trebuchet MS" is your preferred font, but if that is not available then Arial will do. If there is no Arial either then try Helvetica etc etc

sans-serif is a generic font style that will always match *something* on the system and is provided as a fall-back option.

12:23 pm on Apr 7, 2004 (gmt 0)

Preferred Member

10+ Year Member

joined:Jan 14, 2004
posts:388
votes: 0


The best way to embed fonts on the web is not to embed it in HTML, but to use a javascript to replace a certain typographic tag (like H1) with a dynamic flash movie.

Read more here:

[shauninman.com...]

if this link is not accepted by the administrators, visit shauninman.com and search for image replacement.

_david

12:30 pm on Apr 7, 2004 (gmt 0)

New User

10+ Year Member

joined:Sept 24, 2002
posts:31
votes: 0


Hi AliciaM,

the following CSS works for me...

@font-face{font-family: dloldeng;
src: url(fonts/oldeng.eot);
}
.oldeng{font-family: "old english text mt", dloldeng, gothic, serif;
color: red;
font-size: 150%;
}

You have to use the Microsoft font embedding tool to generate the ".eot" file from your existing .ttf - the version I downloaded was WEFTIII2b1 approx 9Mb. As far as I know, it only works for MS browsers... :(

12:37 pm on Apr 7, 2004 (gmt 0)

New User

10+ Year Member

joined:Apr 7, 2004
posts:2
votes: 0


Folks Thankyou!

Am off to try some stuff and the tutorial. Tho' not using CSS style sheets yet(i know I know) and have been told that Java and flash are not options either. (This is result of a web accessibility audit on all Volkswagen Sites) and everything has to be tagged, resizable and predominantly live text for read aloud users....

12:50 pm on Apr 7, 2004 (gmt 0)

Preferred Member

10+ Year Member

joined:Jan 14, 2004
posts:388
votes: 0


Thats the beauty of the shauninman image replacement technique. The markup stays accessible and clean, but for those with javascript and flash turned on, the selected typographic tag will smoothly be replaced by a dynamic flash movie showing your favorite font. If the user doesnt have java and/or flash installed, it will show the CSS tag instead.

This is by far the best way to use custom fonts that I know of.

11:19 pm on Apr 7, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 19, 2003
posts:1747
votes: 0


Alicia M: one further note re WEFT. Not all fonts will allow themselves to be embeded. Many times (especially with "decorative" fonts) you will need to contact the font designer and/or hinter to request they allow you to embed the font, and send you a copy of same which IS embeddable. Sometimes they will do this for nothing; sometimes they will want you to pay for the privilege; and sometimes they either say a flat "no" or just don't answer you.

I've had decent luck with "normal" fonts. The only really decorative font I EVER got to embed without approval from the designer was University Roman (oh, and one of the fancy uncials, not sure which now, but wasn't readable anyway!) I've been turned down flat more times than I've got permission. At this point, I'm using just the stuff that's available for the web and not using WEFT EOTs at all, because as someone pointed out to me elsewhere in re this, there's ALSO a potential copyright problem....

12:04 am on Apr 8, 2004 (gmt 0)

Senior Member from CA 

WebmasterWorld Senior Member encyclo is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 31, 2003
posts:9074
votes: 6


I would avoid font embedding, not only because of it's poor support, but also because even if it did work, the idea of having to download and install a huge font file just to look at your page would have me (and the vast majority of your potential visitors) scrambling to click on the back button as quickly as possible. Don't forget also that most fonts have copyright restrictions which would forbid such embedding anyway.

If you have to have a particular font, then you will have to use an image. You should search for "Fahrner Image Replacement" which will give you a method of serving an image to modern graphical user-agents, and text to the rest.

Finally, you should bring your expertise as a web designer to help out your client, rather than caving in to his demands. It seems as if your client sees their web page as an online version of a printed catalogue, whereas you need to explain that the web is a very different medium, which works in a very different way and has it's own demands and restrictions. You will be serving your client's best interest if you can get this accross, and help him by producing a site which is more adapted to the medium.

12:55 am on Apr 8, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 19, 2003
posts:1747
votes: 0


....having to download and install a huge font file just to look at your page....

Well, that would BE the beauty of WEFT IF it worked flawlessly, and cross-browser, and there WEREN'T potential copyright problems - you DON'T do the above. The EOTs are compressed info and load into the browser (IE only, here!) just like any other text, graphic, etc.

The largest single EOT I ever created was only 33 kb - and included normal, bold, and italic styles/weights.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members