CSS: Using a Non-Standard Font

[Kaeliah]

Using A Non-Standard Font!

I know this works on Chrome and Firefox, but I haven't tested it with a font I've never actually installed on my computer as well so you'll have to do some testing of your own. Anyway, there is a fairly simple CSS trick to using totally awesome fonts on your web pages like any other normal font!

Step 1: Download a cool font. My favorite sites for fonts are DaFont and Font Space. All the fonts are free to download of course, although most require no redistribution. Pick a font and download it.

Step 2: Upload your font, doesn't really matter where but be sure you grab the URL for it.

Step 3: Edit the CSS. Use the CSS below so the CSS can find the font.

@font-face {
    font-family: "FONTNAME";
    src: url(FONTURL) format("truetype");
}

Most fonts are truetype or opentype, you'll have to look at the particular font your using to determine the format though. Insert the font name, and the URL where the code says to, and add the entire block at the top of your CSS. Then, you can add...

font-family: "FONTNAME", Arial;

Wherever you want the text to be changed to the font. Some fonts may look weird depending on the sizing standard your using. Play around with it to get it just right. Make sure whenever you're using a custom font like this, you have a second font listed for those few browsers that don't like this code.