How To Embed Fonts in Websites Using @font-face
To embed a font in your website so that every viewer can see it,
- Find a freeware or shareware font you like in TrueType format (.ttf). [How? Use Google.]
- Download the font.
- 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 kirsle.net, fontsquirrel.com, or WEFT.
- Upload both the TTF and EOT files to your web server.
- Plug the following code into your HTML and CSS, filling in your font name for the placeholders.
src: url( FontFileName.eot ); /* IE */
src: local(" universal FontName "), url( FontFileName.ttf ) format("truetype"); /* non-IE browsers */
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.