info To participate please Register or Login.

Embedding Fonts on a Page

By Simon on September 5th, 2006. Published in CSS.

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)
}

9 Responses

Express yourself. Tell us your opinion. Make a comment!

  • does this works on all browsers?

  • All browsers that can handle css properly, yes.

  • Santiago, you are so correct. How could that have slipped by!? Oh well, it is now changed and updated. Thank you. :)

  • and what´s the .eot ????

    juan záyago said on April 14th, 2007 at 6:51 am
  • Embedded Open Type

    Jatinder said on June 15th, 2007 at 12:47 pm
  • Good article, but where i can find or download the .eot file?

  • This example will be run right?

    @font-face {font-family: “Free 3 of 9″;
    src: url(c:\windows\fonts\)
    }

    Carlos Campos said on November 3rd, 2008 at 4:59 am
  • @Carlos: No, you need to upload the font to your server and link it from there.

  • Write your comment

    Warning Spam and inflammatory comments will be deleted. If this is the first time you make a comment on Easy Webbers it will be held for moderation before being published.