How To Embed Fonts in Websites Using @font-face

If you want to use a particular font on your website, but it isn’t supported across all operating systems and browsers, you have many options including making your text an image, using Flash or JavaScript, and giving up altogether. However, the method I find least intimidating is using the “@font-face” selector in CSS.

To embed a font in your website so that every viewer can see it,

  1. Find a freeware or shareware font you like in TrueType format (.ttf). [How? Use Google.]
  2. Download the font.
  3. If you want your font to be compatible with IE, make a copy of the file and convert it to OpenType format (.eot) using a converter like,, or WEFT.
  4. Upload both the TTF and EOT files to your web server.
  5. Plug the following code into your HTML and CSS, filling in your font name for the placeholders.

@font-face {
font-family: "FontName";
src: url( FontFileName.eot ); /* IE */
src: local(" universal FontName "), url( FontFileName.ttf ) format("truetype"); /* non-IE browsers */

.FontName {
font-family: "FontName", sans-serif;

If it doesn’t work the first time, remember to debug your code!


I found this page useful in clarifying the concept. The above code is adapted from it.




~ by katiedigicomp on February 21, 2011.

%d bloggers like this: