Embedding Fonts on a Page
You want to use a special font to your titels on your blog or website but you know that your visitors won’t see it if they don’t have the font installed on their computers. One solution to fix this problem is to embed a font in a page. Open up your CSS document:
1. Type @font-face {
2. Type font-family: “name”; where name is the full name of the font you want to embed.
3. Next you must indicate where the embedded font can be found by typing src: url(font.eot) (font.eot is the location of the font on your server)
4. Don’t forget to close the code by writing }
It would look something like this:
@font-face {font-family: "name";
src: url(font.eot)
}
Get paid to review this post: Earn $7.50 by making a review about this post on your own blog. Click here for more information!
September 5th, 2006 at 6:10 pm
does this works on all browsers?
September 5th, 2006 at 7:21 pm
All browsers that can handle css properly, yes.
September 6th, 2006 at 8:21 am
src dont scr
http://www.w3.org/TR/REC-CSS2/fonts.html#font-descriptions
September 6th, 2006 at 8:48 am
Santiago, you are so correct. How could that have slipped by!? Oh well, it is now changed and updated. Thank you.
April 14th, 2007 at 6:51 am
and what´s the .eot ????
June 15th, 2007 at 12:47 pm
Embedded Open Type
September 16th, 2007 at 3:07 pm
Good article, but where i can find or download the .eot file?
November 3rd, 2008 at 4:59 am
This example will be run right?
@font-face {font-family: “Free 3 of 9″;
src: url(c:\windows\fonts\)
}
December 2nd, 2008 at 8:43 am
@Carlos: No, you need to upload the font to your server and link it from there.