Web Fonts Get Easier

“Much easier,” I could have said. A while back I reviewed Eric Meyer’s book CSS Fonts (actually a pre-released chapter of a forthcoming book) after putting some information in it to use immediately, applying a purchased font to a critical section a client’s website.

The ease of that small task encouraged me to work on a larger scale, so a couple of days ago I made the time to install a custom web font on a personal blog. You can see it at Frogs For Snakes. The font (as I write this) is “Delicious”, a free font from the exljbris Font Foundry. I like the font but not for this particular site, which I think needs something less spartan, so it may have changed by time you read this.

Below I list the ridiculously simple steps for using custom fonts on a website. You should take some care, if you decide to do this, to ensure that the fonts you select are licensed for your use, and you should contribute to the extent you can to the foundries and to the websites that make the fonts and the tools to use them available. Everybody deserves to be paid. There’s nothing wrong with buying a font, either.

To Install Custom Web Fonts

(This assumes your familiarity with HTML and CSS and your ability to edit files. If you lack that familiarity you can hire me (Steve Clason), or some other qualified developer.)

  1. Select a Font

    FontSquirrel is a good place to start looking for a custom font, but you can find lots searching for “web font” with any search engine. Look at the license to ensure you can use the font legally.

  2. Create a Kit

    You’ll certainly want to support more than one browser, so you’ll need the font in several formats and you’ll need several rules in your CSS. You don’t need to think about that much (if you don’t want to) because FontSquirrel has a terrific tool, called the Webfont Generator, that will convert an uploaded font to the formats you’ll need and will create the necessary rules that you can cut and paste into your stylesheet. Again, if you use the tool, consider donating.

  3. Upload the Font to the Server
  4. Google and Typekit (neither Google nor Adobe need any link-blessings from me so you can look them up) will serve their fonts from a CDN, but to use CSS rather than their applications, the font has to be served locally.

  5. Revise Your CSS to Use the New Font-Face

    The @font-face directive is used to name the font, and to use it you have to include it in your font-family declarations. So, you’ll have some rules that look like this:

    [css]
    @font-face {
    font-family: myFont;
    … lots of css stuff …
    }
    [/css]

    Which you’ll use elsewhere in your stylesheet like this:

    [css]
    header h1.someClass {
    font-family: "myFont", Ariel, Helvetica, sans-serif;
    … other stuff …
    }
    [/css]

  6. If you’re an experienced developer you already know everything else you need to know, but here’s a pro-tip: using variables in a css-preprocessor (I use LESS, SASS is also very good) makes using custom fonts much easier. You can define a variable like @normal: "myFontRegular"; which allows you to change to font definition globally, important during development before you or your client has committed to a font.