CSS @font-face… Custom Web Fonts

Posted on
By Addam Driver

SO! ever wanted to put a custom webfont on you’re web page? Well… you’re in luck with a simple css tag called @font-face. This tag isn’t new. It even supported in IE 5. I don’t think it was wildly adopted because either people didn’t know it existed or fonts were too heavy for the connections at the time. I think it’s a little of both.

Anyway! Let’s get down to the code. Here is a code example:

@font-face {
font-family: “UbuntuMono”;
src: url(http://www.devcrapshoot.com/fonts/UbuntuMono-Regular.ttf);
}

From this code you can use the standard “font-family: UbuntuMono;” in your CSS and IF the user doesn’t have the font, it will download it to their computer temporarily for your’re web page. Pretty cool eh?

.myDiv{
font-family: “UbuntuMono”;
width:100%;
height:100%;


}

You can have several of these on your page. I don’t recommend having many of these because the fonts are pretty heavy. Most people wouldn’t ever know it on a high speed connection but either way, it is heavy.

There is a company named TypeKit who was recently acquired by Adobe ©. They have an AMAZING way of helping you integrate almost any font you desire and you don’t have to worry about any licensing issues or anything like that. They also push fonts that are light in weight.

So if you choose to use Typekit or not. You can use you’re own font using YOUR code so you can optimize it as you see fit.

Some things to note:

  1. The font must reside on the root of the server. No redirects…
  2. Different browsers can utilize different font types. Some are lighter than others and 1 isn’t necessarily supported by all browsers

Have fun and create your own fonts! W00T!!

Tags: , , , , , , ,

Comments

  1. Ronn says:

    I like your fantastic web site, I was searching for this all over.
    best regards,
    Ron

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CSS Methods

HTML Goodies

JavaScript

mustache

node.js

The HTML Writers Guild IWA