htmlcssfontswebfontscustom-font

How do I install a custom font on an HTML site

I am not using flash or php - and I have been asked to add a custom font to a simple HTML layout. "KG June Bug"

I have it downloaded locally - is there a simple CSS trick to accomplish this?

Solution

  • 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