How to Use Custom Fonts with CSS3

One of the most common challenges any web designer faces is ensuring that their work appears as intended. Print designers have the advantage of creating the physical designs themselves, but web designers depend upon user environments (read, browsers) to render their designs correctly.

In the past, browsers could only render the fonts already installed on a user’s computer, which meant that users without a good library of fonts would miss out on designs that made use of uncommon fonts. CSS 3 introduces a new fix called @font-fact that could be the future of web design typography. 

Before @font-face

Web developers often dealt with font compatibility in one of two ways:

1. Replacing text with images of the text styled in the correct font.
   • + text looked exactly the same in all browsers
   • +/- content could not be copied
   • – could not support dynamic content
   • – not ideal for search engine optimization
   • – slower page loading times
2. More commonly, designers would declare multiple alternative fonts in a page’s CSS. If a user’s browser was unable to render a certain font, it would go down the list until it found one it could render.
   • + text could be indexed by search engines
   • + text could be dynamically generated
   • +/- content could be copied
   • – created variability in design

CSS 3 To the Rescue!

Now, designers can have the best of both worlds. The CSS 3 documentation specifies a new tool for design: @font-face. The @font-face attribute affords web developers the advantages of using actual text while also maintaining the integrity of a design.

Originally proposed for CSS2 and actually implemented in IE since Version 5 (though IE used a proprietary Embedded Open Type (.eot) format that other browsers did not eventually adopt), the @font-face selector allows a webfont to be dynamically loaded at the time of page rendering. This means that a font that exists online (in a format like .ttf, .otf, or .eot) is referenced by @font-face, which creates a new font-family value that can then be used in a page’s CSS as usual. Often this results in a slight lag – while the font is loading, the text on a page will display in a browser’s default. Once the font is loaded, the text will change to the correct font.

As an example, the font (League Gothic and Franchise) used for the links at the top and bottom of this page and the titles are all defined by @font-face.

Well, How Do I Get @font-face?

Incorporating @font-face into a website is easy! First select the fonts that you will require. Remember that if you plan to use a font that is already a web standard, you don’t need to worry about any of this! Just declare the font family in your CSS and you’ll be fine.

Ensure that you have the fonts on your computer and that you are allowed to use them for your project. Any file format will work fine. Then hop on over to the Font Squirrel @font-face Generator. This is a great free tool that you can use to easily create a font webkit that will be compatible in all browsers. Font Squirrel also has a great selection of commercial-use free fonts.

4 Easy Steps to Obtaining Your Font Webkit:

1. Navigate to the Font Squirrel @font-face Generator.
2. Add all the fonts you will need.
3. Ensure that the fonts you have selected are legally eligible for uploading.
4. Download the kit!

Once you have downloaded the kit, you should have some files that look like this.

You can consult the .html and .css files to see how it works, but it’s fairly simple. Here are the steps. First, upload all the fonts (every file that is not .html or .css) to your server. Then, add to your CSS the following code:

[syntax type=”html|php|js|css”]

@font-face {
    font-family: ‘FranchiseRegular’;
    src: url(‘franchise-bold-webfont.eot’);
    src: local(‘?’), url(‘franchise-bold-webfont.woff’) format(‘woff’), url(‘franchise-bold-webfont.ttf’) format(‘truetype’), url(‘franchise-bold-webfont.svg’) format(‘svg’);
    font-weight: normal;
    font-style: normal;
}

[/syntax]

The font-family property has the value that will be used to refer to this font in the rest of the CSS. For example, if I want the body to use this font I simply use a body selector as such:

[syntax type=”html|php|js|css”]

body { font-family: ‘FranchiseRegular’; }

[/syntax]

Note that we do not need to declare multiple fonts in the font-family value, because FranchiseRegular will render on any browser! Also, remember to update the urls in the @font-face declaration to your specific fonts. You can copy and past the @font-face declaration to use again if you have multiple fonts.