How to Use @Font-Face CSS

How to Use @Font-Face CSS
Comments Off on How to Use @Font-Face CSS Permalink

How to Use @Font-Face CSS

Earlier I had written about how to use Google Web Fonts.  One other way to embed fonts on a website is via @Font-Face CSS tags.  The setup is quite simple.

The first step is to find fonts you want to use.  I myself love Font Squirrel.  It’s a site full of amazing and free fonts for designers.  You can download @Font-Face kits, as well as generate your own @Font-Face fonts (Just make sure you are legally able to embed the fonts you choose) .

After you’ve uploaded the @Font-Face fonts to your server, insert the following tags into your style sheet:

@font-face {
font-family: 'Web Font Name';
src: url("type/web-font.eot");
src: local("☺"), url("type/web-font.woff") format("woff"),
url("type/web-font.otf") format("opentype"),
url("type/web-font.svg") format("svg");

Not that it’s necessary to know what these files stand for, but good to know.

  • EOT stands for Embedded OpenType and is used by Microsoft.
  • WOFF stands for Web Open Font Format and is supported by Chrome, Opera, Firefox and IE9.
  • SVG is typically a vector format, but can also be used for fonts.  SVG is supported by Chrome, Opera, Firefox, IE9, and Safari.
  • OTF stands for OpenType Font and isn’t supported by all browsers.

So really, you’re embedding all these fonts to just cover all bases.  Older broswers, especially IE8 and below doesn’t support certain font formats.

If you notice, you’ll see the ☺ character.  That’s there as a safety measure to make sure the browser doesn’t read fonts from the machine that’s accessing the website.  Again, it’s just a safety measure to make sure there aren’t any complications.

Simply add your font to the font-family CSS tag.  Make sure to include some stand fonts just in case.

h1 {font-family: "Web Font Name", Arial,Verdana,sans-serif;}

Then calling it up is as simple as before.

<h1>Header Text</h1>

It’s really as simple as that.  Adding a custom font to your website can really help make your website stand out.  Don’t go hog wild though, there’s really no reason to have more than 2 different kind of fonts on your website.


Related Posts