adam adam - 5 months ago 32
CSS Question

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?


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; }

More on this here

So, in this case,

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

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

I downloaded the font from the website: