This website uses cookies to personalise ads and to analyse traffic ok
web design

How to use @font-face

A quick guide on how to use CSS @font-face in order to get custom fonts on any web page.

Firstly, you’ll need to find a nice-looking, free font in order to use it on your web page. Graublau Sans Web by Georg Seifert is a perfect font for our example since it’s free and supports many languages. Download the font on your drive and continue…

In order to support as many as possible browsers and devices, we first need to create and then use different formats of our font (.ttf/.otf, .eot, .woff, .svg etc.). There are numerous tools to convert fonts but the best I’ve come across is FontSquirrel @font-face Generator. A free and pretty fast online tool with many options and features that generates all necessary formats from a single font.

After you convert the font in all formats, create a directory named “fonts” and copy all the fonts formats inside it. Create a new html document in the root directory of your web site (on the same level where the fonts folder resides) and insert the following CSS:

@font-face {
    font-family: 'graublauweb-webfont';
    src: url('fonts/graublauweb-webfont.eot');
    src: local('☺'), url('fonts/graublauweb-webfont.woff') format('woff'), url('fonts/graublauweb-webfont.ttf') format('truetype'), url('fonts/graublauweb-webfont.svg#webfont8xigBfG2') format('svg');
}
h1 {
    font-family:"graublauweb-webfont", Helvetica, Arial, sans-serif;
    font-size:48px;
}

@font-face loads all necessary formats and we set the font-family the same way we would do normally.

It’s best not to use the original font name (e.g. GraublauWeb) in font-family to prevent any user that happens to have the font locally installed, to load it from his/her machine. We need and should load our font that resides on our web server and not on user’s pc, so remember to use different names (e.g. graublauweb-webfont).

Next, we insert our simple markup:

<h1>This is a heading with some custom font.</h1>

That’s about it! Test the page in a browser to see the results.


5 Comments

Post a comment
  1. Valdeir Gomes
    Posted on December 4, 2012 at 02:24 Permalink

    Very good, helped to much.

    Reply
  2. Alec
    Posted on October 26, 2010 at 04:37 Permalink

    Thanks for posting this!

    I saw this once on a website and when I wanted to use it, I couldn’t find the damned site again!

    Kudos to you. 😀

    Reply
  3. Kane
    Posted on September 29, 2010 at 12:44 Permalink

    “We need and should load our font that resides on our web server and not on user’s pc”

    Sorry, maybe I’ve missed the point, but…
    Why ?

    Reply
    • pgourley
      Posted on September 29, 2010 at 23:28 Permalink

      It’s highly unlikely that users will have the font(s) installed on there machine (or in the right format) to use as the font-face and if the font isn’t located the custom font will not load, it’s better to load it from the web server to force the user to download to view so users have a higher chance of being able to see the font.

      Reply
    • malihu
      Posted on September 30, 2010 at 02:32 Permalink

      Hello Kane,
      In short, because of better control over typography (the whole reason behind @font-face).

      Some potential problems when a local font loads are:
      Locally installed font with corrupted files
      Different font versions (e.g. Microsoft updates Georgia)
      2 different fonts having the same name
      Different rasterization between local and server fonts (OS/browser dependent I think)

      There has been an extended discussion at http://typophile.com/node/63992 which fully covers the issue.

      I prefer not to reside on local fonts to avoid any of the issues stated than to save an extra 40kb download (which IE will do regardless of my local declaration)

      Hope I helped, thanks for asking 🙂

      Reply

Post a comment

Your e-mail is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
You can write or copy/paste code directly in your comment using the <code> tag:
<code>code here...</code>
You may also use the data-lang attribute to determine the code language like so:
<code data-lang-html>, <code data-lang-css>, <code data-lang-js> and <code data-lang-php>

css.php