( read )

Break Free of Boring Fonts & Designing with Web Friendly Fonts


For years, designing for the web was a boring endeavor for graphic designers when it came to font choice. Yes, we could make the specialty fonts into images to use on the page, instead of text, but then search engines couldn’t crawl the text and that made the site harder to find. Now we are fortunate enough to have access to cross-browser compatible web safe fonts through third-party sources like Google Web Fonts, or through the new features of CSS3.

This how-to will walk you through two methods you can use to implement your new web safe fonts.

Using Third-Party Web Safe Fonts

There are a number of free online sources for web fonts that are very easy to use and implement. Some sources include:

Regardless of the source you choose to use, the implementation is very simple and barely varies between them.

First, you choose which typeface you would like to use from those available from the provider. Next, in the <head> section of your site’s HTML you’ll need to include the font.

Example, Google Web Fonts including the “Skranji” font:

<code>&lt;link href='http://fonts.googleapis.com/css?family=Skranji' rel='stylesheet'

Example, Adobe Edge Web Fonts including the “League Gothic” font:

<code>&lt;script src="http://use.edgefonts.net/league-gothic.js"&gt;&lt;/script&gt;</code>

Once the font, or fonts, you have selected are included, you can use them in your CSS file the same way you would any other font:

<code>h1 { font-family: 'Skranji', cursive; }</code>

To see Google Web Fonts in action, right-click this page and “view source” – you’ll see that we’re using “Questrial” and “Lato” in our site typography.

The benefit of this method for using web fonts is that these sources are proven to be compatible with all of the modern web browsers and will thus display your designs properly every time.

Using Your Own Fonts with CSS3

While third party web font sources are a great solution, sometimes you may want to use a custom typeface or a typeface that is unavailable through third parties. CSS3 has introduced the @font-face rule, which allows you to include True Type (.ttf) and OpenType (.otf ) font files on your site and then use them in standard CSS like any other font family.

Implementation of @font-face is fairly straightforward and takes place entirely in your site’s CSS file.

<code>@font-face {
font-family: Sansation;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */

And using your included font is just as simple as with the third party sites:

<code>h1 { font-family: Sansation, sans-serif; }</code>

Sounds awesome, right? Well here’s the downside to this method over using a third-party provider: @font-face is supported by Chrome, Safari, Firefox, and Opera but it will only work in Internet Explorer version 9 or higher. Additionally, you have to include an Embedded OpenType (.eot) file of your font for IE to use. For previous versions of IE, you’re still able to set secondary, fallback fonts in your CSS, but this obviously means that your visual design typography will change.

The future of web typography is definitely very bright. As older browsers continue to be phased out and CSS3 becomes the norm, we’ll start to see more and more websites with custom fonts and more unique designs that are not limited by their font selections.

Tags: Web Design