powered by Slim Framework
enhanced by Nesbot.com

CSS3: Custom Fonts using @font-face

Published on Aug 29, 2011 by Jamie Munro

Let me start by saying that I am not a designer, so this feature didn't mean much to me; however, when we told designers that they can start using custom fonts they want ape @$!# for it.




Over the years it has been mentioned countless times how little time you have to capture a person's attention on your website. Often times this can be done with flashy or enticing designs. With this comes increased download times slowing the page load down. Also, many web hosting providers supply a limited bandwidth or charge per GB. Flashy or enticing designs can be costly in both the bandwidth and page load times.

With the ability to embed fonts with CSS3, us web developers, can start pleasing our designers by embedding their custom fonts in the website and stop using images to achieve the same affect.

Assumptions



  • You must have a copy of the font you wish to use on your web server


To enable the @font-face you must first copy the TrueType (.ttf) or OpenType (.otf) font file into a directory on your website. For example, includes or scripts directory. Once this file is included within your website, you can now alter your CSS to include a reference to it. In the following example, all <h1> tags will use the Algerian TrueType font:


<style type="text/css">
@font-face {
font-family: 'AlgerianRegular';
src: url('ALGER.ttf') format("truetype");
}

h1 {
font-family: 'AlgerianRegular';
font-size: 18px;
}
</style>


The following paragraph is a simple example of what this font looks like.

If you are trying this example on your own in Internet Explorer, you might notice the above text doesn't look like the Algerian font. The reason being the above example is unfortunately too simple and doesn't currently work in Internet Explorer.

So, if you are unable to get your TrueType or OpenType fonts to work with Internet Explorer, I suggest using this tool provided by the Font Squirrel. On this page, you upload the font file you have and it will generate a toolkit for you.

Using the example above, when the toolkit was generated for the Algerian font, I ended up with the following files:

  • alger-webfont.eot

  • alger-webfont.svg

  • alger-webfont.ttf

  • alger-webfont.woff


If you now replace the existing ttf file with these files and update your existing @font-face CSS you will have a working custom font in all browsers:


@font-face {
font-family: 'AlgerianRegular';
src: url('alger-webfont.eot');
src: url('alger-webfont.eot?#iefix') format('embedded-opentype'),
url('alger-webfont.woff') format('woff'),
url('alger-webfont.ttf') format('truetype'),
url('alger-webfont.svg#AlgerianRegular') format('svg');
font-weight: normal;
font-style: normal;
}


Now, our Internet Explorer friends should see this paragraph in the Algerian font.

Summary


With the use of the @font-face tag, developers can help please our designer friends and achieve their pretty designs while we developers can still help to ensure quick page load times without the heavy weight of images!

Tags: css3 | CSS

<- CakePHP: Login System using the Authentication Component  Home jQuery: Creating templates for your HTML Content -> 
blog comments powered by Disqus