:( I'm throwing together a little website for a friend's new business, and want to maintain a typeface throughout that is not likely to be commonly installed on visiting computers.

I've found a website that describes two methods (for the IE crowd and then for Netscape):

</font><blockquote>code:</font><hr /><pre style="font-size:x-small; font-family: monospace;">You need to download software to create an embedded font file which can be in two formats .pfr or .eot.

? Portable Font Resources (.pfr):
TrueDoc for Nav 4.0+ and IE 4.0+ on Windows, Mac, and Unix platforms. Download from http://Bitstream.com

? Embeddable Open Type[/b] (.eot):
Compatible only with Explorer 4.0+ on the Windows platform.
Download from http://www.microsoft.com/typography/web/embedding/weft3/default.htm

2. Next we need to embed the file using CSS.

Into the HEAD section of your document insert:

Example with True Type

&lt;link rel = &quot;fontdef&quot; src=&quot;cool-font.pfr&quot;&gt;

To work in IE4 and above, you need to add a pointer to an ActiveX control immediately after the LINK tag OR ELSE
create an OpenType file for Explorer and refer to both on your page.

TrueDoc fonts stay within the browser: you can't download them to your system

Example with Open Type

&lt;STYLE TYPE=&quot;text/css&quot;&gt;
&lt;--!
@font-face {
src:url(fonts/cool-font.eot);
}
--&gt;
&lt;/STYLE&gt;</pre>[/QUOTE]Anybody know offhand whether this works for Safari / Mozilla / etc. as well, and/or other methods that will achieve the same end? How do you design folk make this work, without converting all of your text to GIFs or PNGs?

M.

[ April 17, 2004, 10:14 PM: Message edited by: CubaMark ]

That should work CM.

Embedding in CSS is recognized in Safari. We test fonts with GoLive. No probs. smile.gif

Hey JTmac,

Thanks.. yeah... I'll see what happens. One problem, though, it seems that only certain fonts can be made available (i.e., not all fonts are "embeddable"). Gotta do a little more research on that one. OTherwise I may have to convert all the text to a PNG or something... :( I Want My Typeface! :mad:

M

"Embedding" a font is kind of misleading -- think "referencing"; the user has to have the font available on his/her machine in order for it to work -- also, you need to be precise in entering the font name or it won't work either. (Some fonts have different versions like Espi Sans -- variants known as Epsy, Espy, and Epsi Sans.)

This is why you'll notice most sites will follow some sort of "back-up" with their font usage by naming more than one font: "Helvetica, Verdana, Arial, Sans-Serif", etc. This helps cover all your angles by using a selection of similar fonts.

There are ways to upload a font and embed it in a page, but it is far easier to just reference common fonts or convert them into graphics (jpg or gif preferred).

What does the typeface look like?

MP & PB,

;) I've been hand-coding my webpages since the Web came into being back in '93... so, yeah, I do know how to reference a font that exists on the client's computer via HTML tongue.gif

And no, one cannot "embed' a font into a webpage, so far as I can see, but one can do an off-site reference to a ".prf" file, as noted in my first message.

So, ultimately, the answer to my question is "not easily." I want to use the Papyrus font, which appears to be non-referenceable (unless you have a PeeCee and use BitStream's converter, which probably violates the font owner's copyright) as there is no web-accessible ".prf" file out there.

:(

Ah, well... I'll just have to optimize the heck out of the PNG'd text....

M

Papyrus, which I agree is a really striking font, is standard on Windows. At least, it's present on my Virtual PC, which has Windows 2000 and Office 2000 Pro and nothing else installed. I'm not sure which program it came from.

Of course, Papyrus also comes with OS X, so I guess Microsoft and Apple both agree with us that it's good stuff.

Cheers :-> Bill

CM,
Yes, "optimize the heck out of the PNG'd text"
It's better to use text than an image file, if you want the text indexed by search engines.
Isn't web design fun? tongue.gif
jt

Mark, not meaning to imply that you wouldn't know how just that the "embedding" way is harder than it's usually worth, slows down load times too.

You could always make the png or gif file and use CSS to place it over some h tags, with the text enclosed in span tags, display set to none.

so the html would look something like
</font><blockquote>code:</font><hr /><pre style="font-size:x-small; font-family: monospace;">
&lt;h1 id=&quot;whatever&quot;&gt;&lt;span&gt;whatever&lt;/span&gt;&lt;/h1&gt;
</pre>[/QUOTE]and the CSS would look something like

</font><blockquote>code:</font><hr /><pre style="font-size:x-small; font-family: monospace;">h1#whatever {
background: #fff url(&quot;../images/whatever.gif&quot;) top left no-repeat;
}

h1 span {
display: none;
}</pre>[/QUOTE]I think the text is still indexed in this instance as well.

Gerbill - I don't think papyrus comes with Windows.

Sigh... for the good ol' days of Mosaic and HTML 1.0.

You ain't just whistling dixie. ;)

Sigh... for the good ol' days of Mosaic and HTML 1.0. :D

Thanks for all the advice, amigos - once this puppy is online, I'll drop the URL to this thread so y'all can critique the hell out of it ;)

Go Montreal! (gotta do that for dear old Mom - she's staying up late tonight to catch the game)

M.