CSS3 font-face or how to use a custom font for your website

Web designers have been constrained to use a limited number of safe-fonts due to the dependence of being available on various computers and operating systems. CSS3 changed that by introducing a feature that allows you to use any font for your website.

This article contains a simple and easy to implement tutorial about using the @font-face property.


Ok, how can I use this?

Let’s see now how can you take advantage of this. So, in order to be able to use this CSS3 property, you must complete the following 3 steps and you can also check the demo.

Demo page

For this fast example I used 3Dumb font from Font Squirell.

1.Upload the font to your server

Just open your FTP tool and upload the font to your server and note the location. If you don’t have a cool font to use for your website then you could try:

2.Define it in your CSS file

@font-face {
	font-family: '3DumbRegular';
	src: url(‘your-path/3Dumb-webfont.eot’);
	src: local('?'), url('3Dumb-webfont.woff') format('woff'), url('3Dumb-webfont.ttf') format('truetype'), url('3Dumb-webfont.svg#webfont57ztNrX6') format('svg');
}

Just make sure that you change “your-path” with the exact location of your font.

Thanks to Paul Irish, we can use this cross browser font-face solution. As you notice there are multiple font sources defined, as ttf, eot and svg.

  • TTF – Works in most browsers except IE and iPhone.
  • EOT – IE only.
  • WOFF – Compressed, emerging standard.
  • SVG – iPhone/iPad.

3.Properly use it

h1
{
  font-family: '3DumbRegular', Arial, sans-serif
}

Demo page

About Copyright

I’d recommend always make sure you check the used font license before you use it in commercial/personal purposes. Use free fonts or check the fonts available for @font-face embedding list.

That’s all folks!

This is how you can beautify the fonts from your site, I hope you enjoyed my article and feel free to comment about it.

If you enjoyed this article, you might also like:

Written by Catalin Rosu

Catalin Rosu, a.k.a Red, is a passionate web designer and developer who loves to be creative and enjoys CSS techniques. Stay tuned for latest updates, subscribe to RSS and follow him on Twitter.

27 Responses to “CSS3 font-face or how to use a custom font for your website”

  1. Eugen Oprea says:
    November 3, 2010 at 00:49

    That’s a good point you touched, as I was looking for a while into this.

    Just a quick question. I am just wondering if there is any special place on the server where I should add them.

    Thanks!

    Eugen

    Reply
    • Red says:
      November 3, 2010 at 09:16

      You can place your fonts wherever you want on your server as long as you remember your path and use it to define your font inside the CSS file.

      src: url(‘your-path/3Dumb-webfont.eot’);

      Reply
  2. Keezo says:
    November 4, 2010 at 20:07

    If only @font-face whas compatible and render the same cross-browsers :<

    Webkit rules!

    Reply
  3. Stacy says:
    November 4, 2010 at 22:43

    What about font smoothing? I have issues with that on some browsers.

    Reply
    • Red says:
      November 4, 2010 at 23:10

      Stacy, indeed, this can be a side effect for some fonts, the fact they don’t render smoothly on all browsers.

      Regarding @font-face I’d say you have to love it or hate it! Alternatively, you can choose another custom font embedding solution as cufon, sIFr etc.

      Reply
  4. Dzinepress says:
    November 13, 2010 at 18:36

    really helping technique you sharing. thanks

    Reply
  5. Alex says:
    December 11, 2010 at 00:53

    Hey, I have a little question. Can you change text size if you use @font-face ? Thanks in advice.

    Reply
  6. Mohsen says:
    December 23, 2010 at 21:16

    wooooo.like always.

    aaaaweeesoooome

    Reply
  7. Ohana says:
    February 23, 2011 at 12:40

    can someone explain me what does this code:
    src: url(“League Gothic.ttf”) type(“true-type”); ?

    Reply
  8. Isuru 825 says:
    February 24, 2011 at 06:43

    http://www.fontsquirrel.com/fontface/generator

    Reply
  9. Hassan says:
    July 7, 2011 at 16:59

    Great work!
    One question: Is @font-face property supported by the older browsers? I mean is it safe to use it without worrying about backward compatibility issues or something?

    Reply
  10. vipin says:
    November 4, 2011 at 10:06

    Dear friennd ,

    You are very helpful man. all your articles are very useful and easy to understand for beginners. So thank you so much for sharing tutorials.

    Hoping more good things.

    Thanks
    Vipin CK

    Reply
  11. vipin says:
    November 4, 2011 at 10:21

    Hi Red,

    Could you please help me to get various types of fonts for devices , I mean .eot,.woff like these..for using ” @font-face ” property.

    Thanks
    Vipin CK

    Reply

Leave a Reply