Unusual Fonts

Using non-standard fonts on a webpage

[beammeup4]

I'm wondering if any of you know how to embed some code (HTML, javascript, whatever) into your source that makes a viewer see a certain font whether they have that font on their computer or not. See http://chris.pirillo.com for an example (obviously his blog). When I first visited the site, I saw the font which was really awesome because I didn't have it on my computer. He's got a link to download the font, but it seems I didn't need to download it because it showed up perfectly. If you look at his source, I didn't see anything in the style sheet or the coding with that font and even if it was, I'm not sure how he made it so you instantly see the page in the right font. Heck, I even went to my local library and it showed up with that font. How do you do it?

Thanks

[Brett_Tabke]

Hey - that's the tech tv guy, and owner of the weirdest [rentmychest.com] website I've seen in awhile.

The font is Lucida Console.

[beammeup4]

Yeah, but it doesn't look like Lucida Console to me. I don't think Lucida Console is a handwriting-type font.

[choster]

I get Lucida Console as well, on Mozilla.

The trick here is the CSS code

@font-face {
font-family: Chris Pirillo;
font-style: normal;
font-weight: normal;
src: url(http://chris.pirillo.com/CHRISPI1.eot);

This designates an embedded font called "Chris Pirillo" which is defined in the file CHRISPI1.eot. This .eot file was created using the Microsoft Web Embedding Font Tool [microsoft.com] (WEFT), which IIRC is based on OpenType [microsoft.com]. As far as I know, this is a Microsoft-only extension. Netscape 4 supported a different proprietary technology for embedded fonts called TrueDoc (extension .pfr, in coordination with Adobe and Bitstream).

Due to bandwidth and security concerns, potential copyright issues, the complication of designing a typeface and creating the font file, and of course the great browser divide, embedded fonts never became mainstream. Internet Explorer may retain WEFT support for backward-compatibility, but I couldn't find any mention at any standards body, and Mozilla nd Netscape 6+ do not appear to support either type of downloadable font.

[tedster]

Here's the magic code:

@font-face {
font-family: Chris Pirillo;
font-style: normal;
font-weight: normal;
src: url(http://chris.pirillo.com/CHRISPI1.eot);
}

It takes some extra download time to embed a font, and from what I can see, only Explorer has support (makes sense, since MS created the technology.) It's also pretty rare because of a dicey copyright situation with the font designers. Of course, Chris owns his font, so he's in the clear.

Lots of good info about this in an earlier thread here:
HTML Fonts [webmasterworld.com]

<added>
Nice going, choster. I type too slow, I guess!
</added>

[Brett_Tabke]

ack - sorry, I had css off (erm - local user css file set anyway). Didn't see the embed in the source.

[gethan]

Stumbled on this just now... downloadable fonts in Netscape Communicator - nice short link [developer.netscape.com]

Though the copyright says 1997... Netscape 4.7?

[added]The test page [developer.netscape.com] - appears to _NOT_ work in Mozilla 1.3[/added]