CSS3 @font-face Custom Web Fonts | Web Typography

February 28, 2011 — One of the greatest advancements in CSS is the @font-face CSS 3 module. @font-face gives the designer the ability to use custom fonts that are not web safe fonts without having to resort to sIFR Flash technology to accomplish the task.

It's all about the fonts

CSS3's @font-face gives the designer the ability to layout beautiful typography with out the use of graphics by using custom fonts that are not stored on the visitors computer and without having to resort to sIFR Flash technology to accomplish the task. @font-face syntax is fairly straight forward. It's a bit more effort than using a web safe font, but worth the trouble. Lets take a look at the syntax. As with any HTML style @font-face can be declared in the head of your document or in an attached stylesheet. 

  1. @font-face {
  2. font-family: 'AIFragmentRegular';
  3. src: url('fonts/aifragme-webfont.eot');
  4. src: local('☺'), url('fonts/aifragme-webfont.woff') format('woff'), url('fonts/aifragme-webfont.ttf') format('truetype'), url('fonts/aifragme-webfont.svg#webfontjSlPgmJV') format('svg');
  5. }

Lets Break it down

Line 1 opens the @font-face declaration

Line 2 is the the font-family declaration. 'AIFragmentRegular' designates the family type. In this example we have only chosen to display the 'regular' version of the custom font. If we want to display it bold, italic or some other variation we would need to build each variation separately. The remaining lines indicate the type of font and where it can be accessed. In our case they are located in a folder called "fonts" in the same directory as the CSS file we have linked to the page. You will notice the syntax is similar to how we call a background image.

Moving on to line 3 we have src: url('fonts/aifragme-webfont.eot'); This is required for the font to work on IE. No web design would be complete if it didn't require some work around for IE to play nice. 

Line 4 you will note a Smily Face. This icon is The OpenType spec prevents the users machine from using a localized font that may be of the same name. Following the smily face are the remainder of font types made available for browser compatibility. We all recognize .TTF, but what about .WOFF and .SVG? .WOFF is a newly created format supported in FireFox and .SVG is necessary mobile webkit browsers. It should be noted that even though .SVG is supported on mobile browsers CSS Letter-spacing is not.

Making @font-face Work For You

Now that we have established our fonts and where to find them we can move onto something more familiar. Using the custom fonts in a web design is identical to how we would select and style a web safe font. The example below ties together what we did above with a live demonstration.

  1. @font-face {
  2. font-family: 'AIFragmentRegular';
  3. src: url('fonts/aifragme-webfont.eot');
  4. src: local('☺'), url('fonts/aifragme-webfont.woff') format('woff'), url('fonts/aifragme-webfont.ttf') format('truetype'), url('fonts/aifragme-webfont.svg#webfontjSlPgmJV') format('svg');
  5. }

  6. .demo {
  7. font:4em 'AIFragmentRegular';
  8. color:#666;
  9. }

  10. TYPOGRAPHY

TYPOGRAPHY

More CSS Text Effects

Have A Question About Custom Web Fonts and @font-face?

Custom fonts can be tricky business so if you have a question about @font-face let us know. We are a Shenzhen, China web design company who actively participates in the development community. We are always happy to help those who need it. So if you have a question about @font-face leave us a comment below.

Add a Comment

Comments

Posted Subject Comment
Author
May 08, 2011
In reply to: Sayeed
How To
Font Squirrel
One of the best ways to make the @font-face web font formats .woff and .eot is to use the font generator at font squirrel - http://www.fontsquirrel.com/fontface/generator . Please note they will only allow you to convert fonts that are not copyright protected.
Sayeed
May 07, 2011
How To hi i am sayeed web designer from delhi (india) . i want to know how can i make a font format .woff and .eot plz tell me that i m very really confused
sayeed.
saidarts@gmail.com