Helpful Information

Category: General web building

Embeding fonts

Is it possible to embed a font type into a webpage, so if the visitor does not have that font type it will still work?:confused:

good question...

here's the answer - no

Sorry to be the bearer of bad news... but there's no way to do this. Only work around is to make images - but if you're talking about using the font for all the text - this is not a valid option...

you could put a link there to download the font - but most users wont do that...

this question is actually asked quite often.. sorry mav, no can do

~Quack

Actually, yes you can embed custom fonts that go beyond the user's own font collection, though you have to use different methods for different browsers (and remember, this can often dramatically increase your page size):

<style>
@font-face {
font-family: "font name";
src: url("http://www.yoursite.com/font_file_name.ttf");
}
.classname {
font-family: "font name";
}
</style>

Example:

<font color="#000000" size="1" face="font name">text using special font</font>

or:

<p class="classname">text using special font</p>

or using OpenType (which not all fonts work with):

<link rel="fontdef" src="fontname.prf" />

and then use

<font face="fontname"/>

More Info (http://hotwired.lycos.com/webmonkey/99/45/index1a.html)

my niavety has proven me wrong yet again :(

I am truly sorry...

~Quack

i can't seem to get any way to work...

Assuming you're trying to use the code Feyd provided; did you:

[list=A]
Remember to upload the font you wish to use to the proper directory?
Did you change the path in this line:
src: url("http://www.yoursite.com/font_file_name.ttf"); to the correct path where the font you wish to use exsists?
[/list=A]

Have you considered WEFT (just a link, not a recommendation): http://www.microsoft.com/typography/web/embedding/weft/default.htm

here's the test code i've used: (yes, i've uploading the .ttf)

<html>
<head>
<style>
@font-face {
font-family: "espy.ttf";
src: url("http://www.freedombigred.com/espy.ttf");
}
.espy {
font-family: "espy.ttf";
}
</style>
</head>
<body>
<font color="#000000" size="1" face="espy">ESPY</font>
<font color="#000000" size="1">REGULAR</font>
<p class="espy">ESPY</p>

<span>REGULAR</span>
<span class="espy">ESPY</span>
</body>
</html>

Just a quick guess here (could be missing something), but try changing this:

.espy {
font-family: "espy.ttf";
}

To this:

.espy {
font-family: "espy";
}

And this:

font-family: "espy.ttf";

To this:

font-family: "espy";

Again, just a quick guess, but give it a try ;).

nope, still nada:(

Well, perhaps Feyd could sppot the problem. It looks like it should work to me, but I might be missing the obvious ;).

In the meantime, [re-stating] have you looked into WEFT?:

http://www.microsoft.com/typography/web/embedding/weft/default.htm