Project / Support Center
Welcome, Guest. Please login or register. March 31, 2023, 04:56: AM
Home Help Search Login Register
D-Web Web Site Creator D - Web Web Site Creator On-line HTML Editor No Programming knowledge required. Web Global Net PayPal-Cart Shopping Cart System PayPal - Kart Shopping Cart System for E-Commerce over the internet, that's easy to use. Web Global Net Newsletter Manager Newsletter Manager On-line Newsletter Creator with Email Subscriber Management.
Ring Central Discount
Web Global Net Web Application & Web Development Project Center  |  Web Site Planning Related  |  General Web Development Questions  |  Topic: How to embed a True Type Font on your web page. 0 Members and 1 Guest are viewing this topic. « previous next »
Pages: [1] Go Down Send this topic Print
Author Topic: How to embed a True Type Font on your web page.  (Read 14372 times)
admin
Guest
« on: April 16, 2007, 09:22: PM »

Font Embedding

How to embed a True Type Font on your web page.

You may have an interesting or weird font type that you want on your web page, but in order for other people to be able to see this font you will need to embed it on your web page. Why? Because when a visitor views a web site, the only fonts that will display are those installed on the visitors system!

So if you want either a weird gothic font or an old Celtic font such as in the main logo of my site (which is actually an image) you will need to either display the font in an image or embed the font in your web page.

NOTE:: Although this guide is new it is based on old information. We will try to update it as soon as I have time.


Embedding the font:

To embed a font type on a Web page 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. And lastly attach the font to your style sheet.

   1. 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 from http://Bitstream.com
          *


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



   2. Next we need to embed the file using CSS.
   3.

      Into the HEAD section of your document insert:

      Example with True Type

      <link rel = "fontdef" src="cool-font.pfr">

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

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

      Example with Open Type

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

This method works in IE5 & IE6 but is not supported by Firefox/Opera.
Report to moderator   Logged
Pages: [1] Go Up Send this topic Print 
Web Global Net Web Application & Web Development Project Center  |  Web Site Planning Related  |  General Web Development Questions  |  Topic: How to embed a True Type Font on your web page. « previous next »
Jump to:  


Login with username, password and session length
Powered by MySQL Powered by PHP Powered by SMF 1.1.19 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!