Using Web Fonts in CSS3

Currently, you can only use about 10 to 15 types of fonts on the web without having to create time-consuming and non-Google friendly images. In order to promote and further the idea of simple web design, it would be better to use plain text. Thankfully, you can use CSS3 web fonts along with other typography techniques to dress up the font on your website.

As a disclaimer, remember that CSS3 is not universally supported yet by all browsers, so use the following techniques with caution. Off of the top of my head, I believe that this is supported in Webkit (Safari, Chrome) and Firefox, but if I’m wrong let me know in the comments.

Import Web Fonts Into Your Design

With CSS3, you can import fonts into our design much like you import video, images, text, and scripts. First, find a font on the web that you would like to use. Generally, it has to be publicly accessible in a TrueType format (.ttf). For this example, I’m going to use the Kimberley TrueType font referenced recently on A List Apart.

To import the font, merely reference it as follows in the stylesheet:

@font-face {
  font-family: "Kimberley";
  src: url(http://www.princexml.com/fonts/larabie/kimberle.ttf) format("truetype");
}

The @font-face selector indicates that you are declaring a font for use in the stylesheet. The font is named (anything you like) after the font-family: selector. The path to the font is referenced via the src: attribute.

Now, you can use the font in CSS as you would any other font by using the name you previously gave the font.

h1 { font-family: "Kimberley", sans-serif }

You can use this pattern to import a huge variety of fonts without hosting any of them on your site or by creating cumbersome images. One issue, though, is copyright issues attached to fonts you find on the internet. You should either ask permission before using a font, or find a font that is Creative Commons friendly.

Interested in learning more about simple web design? You can follow @simplrdesgn on Twitter, join the Cherrysave Facebook page, or read along by subscribing to RSS.