Enhance your website with @font-face

Why create an JPEG or a Flash video file to create text using a specific font with multiple effects?

This old technique was used to be cool ... but not anymore. With the introduction of Web Font in the late 90's (yes the 90's with CSS 2) and the new CSS3 features, you have no more excuses. Web Font are pretty easy to use and can also improve your SEO (if you compare with a flash video for example).

The @font-face feature from CSS3 allows us to use custom typefaces on the web in an accessible, manipulable, and scalable way. It offers great benefits like:

• Full search-ability
• SEO friendly
• Easy to setup
• Behaves exactly the same as regular text
• Works across top browsers
• Print style-sheets work with @font-face
• Compatible with mobile device

How it works

Here's a simple structure of how these Web Font works.

font-family: 'my-family'; {
  src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
  url('myfont-webfont.woff') format('woff'),
  url('myfont-webfont.ttf') format('truetype'),
  url('myfont-webfont.svg#svgFontName') format('svg');
  style: normal;

Why woff, ttf, svg and eot? Simply because not all the browsers understand these extensions. For example, IE supports EOT format, Safari and Opera supports OTF, TTF and SVG and Mozilla browsers supports TTF.

How do I get them?

First of all before you use a Font for the Web, make sure you have the rights. Not all fonts are legal to use it for the web, and they are limited use of fonts due to no form of copy protection. So be careful.

Google offers a great free to use online Web Font library you can use legally. Simply go to: http://www.google.com/webfonts and follow the easy steps.

You can also generate your own font. FontSquirrel.com has a great tool to convert your font to a web font. Go to: http://www.fontsquirrel.com/fontface/generator to generate your own Web Font.

Demo

Now let's have some fun and create one!

Let's use this Salt Angelina Jolie Movie Poster for this demo:

Now for this Demo, I couldn't find the exact font so I got Aldrich and Jockey One from the Google Web Font Library and use this HTML code in my file:

<link href="http://fonts.googleapis.com/css?family=Aldrich|Jockey+One" rel="stylesheet" type="text/css" />

And I except this final result:

How to do it? using this CSS:

div#saltPoster {
  border: solid 2px #fff;
  background: #000 url(/download/salt-angelina-jolie-movie-poster-back.jpg) no-repeat bottom center;
  color: #fff;
  font-family: 'Aldrich', sans-serif;
  height: 280px;
  margin: 230 auto;
  padding: 140px 0 0 0;
  position: relative;
  text-align: center;
  width: 325px;
}
div#saltPoster #name,
div#saltPoster #slogan,
div#saltPoster #date,
div#saltPoster #site,
div#saltPoster #actor {
  padding: 0;
  position: relative;
  text-align:center;
  text-transform: uppercase;
}
div#saltPoster #name {
  font-weight: bold;
  font-size: 40px;
  letter-spacing: 20px;
}
div#saltPoster #name:before {
  color: rgba(255, 255, 255, 0.2);
  content: attr(data-one);
  font: bold 150px 'Jockey One', sans-serif;
  left: -60px;
  letter-spacing: 5px;
  position: absolute;
  text-transform: uppercase;
  top: -60px;
}
div#saltPoster #slogan {
  display: block;
  font-size: 12px;
  padding: 130px 0 0 0;
  letter-spacing: 5px;
}
div#saltPoster #date {
  display: block;
  font-size: 10px;
  margin: 0;
  padding: 50px 0 0 0;
  letter-spacing: 4px;
}
div#saltPoster #site {
  display: block;
  font-size: 8px;
  letter-spacing: 2px;
  margin: 0;
  padding: 0;
  position: relative;
  text-align:center;
}
div#saltPoster #actor {
  font-size: 16px;
  left: 35px;
  letter-spacing: 8px;
  position: absolute;
  text-align: center;
  top: 10px;
}

And HTML:

<div id="saltPoster">
 <span id="name" data-one="salt">salt</span>
 <span id="slogan">who is salt?</span>
 <span id="date">summer 2010</span>
 <span id="site">WhoIsSalt.com</span>
 <span id="actor"> angelina jolie</span>
</div>

Now, as you can see I use the data-one in both CSS and HTML. Why? simply because I didn't want to repeat the text twice but mostly using this technique, I will not forget to replace it twice if I have to change it.

Results may vary, you might have to play with your CSS a little!