Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How do I embed a Font on my webpage?

Embedding Fonts

How do I embed a Font on my webpage?

by  cian  Posted    (Edited  )
**This information is quite old and I have not recently checked to see if it is still valid**

To embed a font type on a WebPage first select the font you want to embed either from your hard drive or download it from the Internet. Then create an embedded font file(below). And lastly attach the font to your style sheet.



Creating the Embedded File
You need to download software to create an embedded font file which can be in two formats .pfr or .eot.


Portable Font Resources (.pfr): TrueDoc for Nav 4.0+ and IE 4.0+ on Windows, Mac, and Unix platforms
Download the software from http://Bitstream.com

Embeddable Open Type (.eot): Compatible only with Explorer 4.0+ on the Windows platform
Download the software from http://www.microsoft.com/typography/web/embedding/weft3/default.htm



Next we need to embed the file using CSS.
This can be done 2 ways

Into the HEAD section of your document insert:


Example with True Doc
Code: 
<link rel="fontdef" src="my-fancy-font.pfr">

To work in IE4 and above, you need to add a pointer to an ActiveX control immediately after the LINK tag or the easier option: create an OpenType file for Explorer and refer to both types on your page.

TrueDoc fonts stay within the browser: you can't download them to your system


Example with Open Type

Code: 
<STYLE TYPE="text/css">
<--!
@font-face {
  src:url(myfonts/fontname.eot);
}
-->
</STYLE>





I apologise for any errors or ommisions.
Questions or feedback would be greatly appreciated.

+

Register to add this FAQ to your archive
Register to rate this FAQ  : BAD 1 2 3 4 5 6 7 8 9 10 GOOD
Please Note: 1 is Bad, 10 is Good :-)

Part and Inventory Search

Back
Top