How To Expand Your Blog’s Typeface Choices

by on March 7, 2011

Until recently, web designers have been limited to a selection of a dozen or so “web-safe” fonts. Out of literally hundreds of thousands of available fonts, this is a stunning limitation.

The restriction is due to the fact that fonts available on one Operating System and on any particular computer might not be available on another. And, each OS comes with a very basic set of default fonts. As a result, if your font isn't available on your visitor's computer, what he/she views could be substantially different than the design you intended to portray.

We set the fonts we want to use in CSS style sheets or in-line with “style” settings. You can view this limited set, nicely grouped by their cross-browser “font-family” settings that you should use here.

Outside of using graphic images of pre-written text, we have two universally accepted techniques available to us today that give us access to many more possibilities. These are Google Fonts and the CSS3 @font-face style. Actually, the latter was gaining acceptance by some browsers before the official CSS3 standard.

With Google Fonts, you're safe with any browser, any browser version, any operating system, any OS version, and so on. With CSS3 fonts, your visitor needs to have the latest web browser installed.

Choosing Fonts for a Page/Site

Generally, you shouldn't use more than two or three fonts on any given page. And, make sure your selections are legible. Try to avoid script typefaces except for emphasis.

Moreover, if you do use more than one, you should choose them based on contrast. If you pair two fonts that are very similar, it appears to the eye that something is slightly “off” with the page.

Using Google Fonts
Google Font: Cabin Sketch

The Google Fonts solution is the easier option; and, it's universally compatible. But, it only adds a few dozen more typeface choices.

All you have to do is add a link into your theme's header.php file (near the line where you load your own stylesheet) and then reference the font in your style.css file just as you would any “web safe” font.

Here's how it works. Visit the Google Font Directory. Choose a font that you want to use by clicking its name.

On the next web page, click the “Use this font” tab. This will show you the line to add to your header.php file and an example of how to use it in your stylesheet. Yep; it's really that simple.

Using The CSS3 Embedding Technique
Uploaded Font: Chopin Script

Here's how the CSS3 technique works. Just upload the font file (TTF or OTF file type) you want to use to your web site, maybe in a subfolder of your current theme. Make sure you're not violating any copyright laws with the file.

Next, you simply embed it in your stylesheet, using CSS code.

Code: CSS

@font-face
{  
    /* this assumes you created a 'fonts' folder in your theme folder */
    font-family: 'My Font Name Choice';  
    src: url(fonts/FontFileName.ttf) format('truetype');  
}

You can give the typeface whatever font-family name that you want. Finally, you access your new font like this:

Code: CSS

h3
{
    font-family: 'My Font Name Choice';
    font-weight: bold;
}
Finding Font Resources Online

In closing, here are seven quick resources that you can scour for that special typeface.

Share This Article: “How To Expand Your Blog's Typeface Choices”

(Also Available: Press CTRL+D to Bookmark this Page)

Comments

Share Your Thoughts  3 Responses to “How To Expand Your Blog’s Typeface Choices”
  1. 1
    Zack S says:

    it’s good to know that we have more choices for fonts on our blogs

  2. 2
    Razvan says:

    Hi there. I see you are recommending several fonts websites. Personally i use http://www.fontineed.com over anything else. Hope it helps.

  3. 3
    Luke America says:

    @Razvan: Nice resource. Thx for sharing.

    Here’s an online utility that converts between various font types including the M$-specific EOT fonts:

    http://www.fontsquirrel.com/fontface/generator

Share Your Thoughts

(Some editor features are restricted unless you're logged in.)

(When replying to a specific comment, your browser may require Shift+Enter instead of just Enter.)


(get a gravatar)


Notify me of followup comments via e-mail. You can also subscribe without commenting.