How do I install a custom font on an HTML site

Solution 1:

Yes, you can use the CSS feature named @font-face. It has only been officially approved in CSS3, but been proposed and implemented in CSS2 and has been supported in IE for quite a long time.

You declare it in the CSS like this:

 @font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); } 
 @font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf');}

Then, you can just reference it like the other standard fonts:

 h3 { font-family: Delicious, sans-serif; }

So, in this case,

<html>
   <head>
    <style>
      @font-face { font-family: JuneBug; src: url('JUNEBUG.TTF'); } 
      h1 {
         font-family: JuneBug
      }
    </style>
   </head>
   <body>
      <h1>Hey, June</h1>
   </body>
</html>

And you just need to put the JUNEBUG.TFF in the same location as the html file.

I downloaded the font from the dafont.com website:

http://www.dafont.com/junebug.font

Solution 2:

You can use @font-face in most modern browsers.

Here's some articles on how it works:

http://webdesignerwall.com/general/font-face-solutions-suggestions
http://webdesignerwall.com/tutorials/css3-font-face-design-guide

Here is a good syntax for adding the font to your app:

http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax

Here are a couple of places to convert fonts for use with @font-face:

http://www.fontsquirrel.com/fontface/generator
http://fontface.codeandmore.com/
http://www.font2web.com/

Also cufon will work if you don't want to use font-face, and it has good documentation on the web site:

http://cufon.shoqolate.com/generate/

How do I install a custom font on an HTML site

Solution 1:

Solution 2:

Related

Recent Posts