Page 1 of 1

CSS @font-face: A Quick Guide Rate Topic: -----

#1 Vip3rousmango   User is offline

  • D.I.C Head
  • member icon

Reputation: 56
  • View blog
  • Posts: 110
  • Joined: 10-February 10

Posted 04 April 2011 - 06:40 AM

CSS @font-face
A Quick Guide

Welcome to the CSS @font-face quick guide! I hope you find this helpful in your future design projects. Tutorial Length: 15min.

@font-face is a CSS rule which allows you to show a font on a Web page even if that font is not installed on the users' computer! This means that designers and developers don't have to use those horrible looking pre-installed fonts anymore! Say goodbye to Ariel, Helvetica, sans-serif and the rest of 'em! Woohoo!

The best part is most of the hard work can be done for us! Thanks to an awesome website -->> Font Squirrel <<-- you can get quick and easy access to 100's of commercial free fonts already packaged up in a nice little kit! For our example today we're going to use the "Permanent-Marker" fontface kit from Font Squirrel. Snag your copy here: Attached File (164.88K)
Number of downloads: 466
Each @font-face font kit come with:

TrueType Fonts for Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome
EOT fonts for Internet Explorer 4+
WOFF fonts for Firefox 3.6+, Internet Explorer 9+, Chrome 5+
SVG fonts for iPad and iPhone
Cufón fonts in case you want them
Demo.html and stylesheet.css so you can get going fast

This is everything you'll need to use the awesome font you picked quickly and easily with (up to 92%) browser support!

***NOTE: Fonts must have a Web-font licence! Check the Web site you are downloading or purchasing the font from, or the documentation that comes with the font. END NOTE*** -> This is why I use Font Squirrel, they do that leg work for you and it's free!

Let's Get Started: CSS

So if you open the fontkit given to us theirs a number of files inside. Don't worry if there is a lot going on I'll break it all down for you. First, let's open the .css file and see whats going on here.
/* Generated by Font Squirrel ( on April 3, 2011 11:55:32 PM America/New_York */

@font-face {
    font-family: 'PermanentMarkerRegular';
    src: url('PermanentMarker-webfont.eot');
    src: url('PermanentMarker-webfont.eot?iefix') format('eot'),
         url('PermanentMarker-webfont.woff') format('woff'),
         url('PermanentMarker-webfont.ttf') format('truetype'),
         url('PermanentMarker-webfont.svg#webfontCD2zZm7K') format('svg');
    font-weight: normal;
    font-style: normal;


So this is how we use @font-face. After declaring @font-face, we must name the font-family this name can be anything you want and what you'll use to call the font when you need it for designing in this case Font-Squirrel chose to call it "PermanetMarkerRegular".

After font-family we need to link to the font files from the kit sort of like a background image the difference is we also declare the format type afterward using format('###'), this is so each browser knows what font file to use to display the fonts. The first src: url('') format(''); should always be the .eot font file. This file is for IE and is required first for IE to display the fonts propery, other browers arn't as picky (stupid IE) and because of that, we can put their fonts after but you must use another src: url('') format(''); to list the rest of the browsers because IE want's to be in a statement all its own. What an attention hog.

Usage: HTML

So, you created your @font-face and now you're ready to start some CSS styling and inlcude this font into the design! But wait, we still need to add the font files to our project! If you look above our url('') reference has no folders, which means the fonts should be in the same directory as the style.css file. If you wanted to put the fonts into a folder like "fonts" for example, make sure you remember to update the paths url('fonts/PermanentMarker-webfont.eot');!

The last thing is now using your font in your style! Just make sure you obviously reference your stylesheet in your html first!
<!-- Stylesheet -->
<link rel="stylesheet" type="text/css" href="style.css">

and then you can use:
h1 {
font-family: PermanentMarkerRegular, Helvetica, Arial, sans-serif;

in your CSS with a couple of fall backs JUST in case @font-face isn't supported. A good designer should always add them. Yeah, I was kidding before when I said you never need them again, for best practises you should be adding them just in case you stumble across that 8%.

Thats it! You now are able to use @font-face in your project. It's so much easyer knowing that your fonts will display properly across most platforms. Enjoy!

Is This A Good Question/Topic? 0
  • +

Page 1 of 1