Using custom fonts with HTML5

No more need to render headers in Photoshop. Here's how to use web fonts

I create web sites and web applications for fifteen years and I cannot count the times I have rendered a header text in Photoshop to get that specific font that was used by the graphic designer. Flash and Silverlight allow me to use any font I like and now HTML5 can do the same. How does it work?

custom font

<!doctype html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Loek van den Ouweland - Custom Fonts</title>
    <meta name="description" content="">
    <meta name="author" content="Loek van den Ouweland">
</head>
<body>
    <h1>Using custom fonts</h1>
</body>
</html>

That will render like this:

custom

To avoid any discussion about copyrights and other boring stuff, I am going to use the great Google WebFonts site that states:

All fonts in the directory are available for use on your website under an open source license and are served by Google servers.

So visit http://www.google.com/webfonts, select any font and click on the “Use this font” tab.

googlefont

<!doctype html>
<head>

  <link href='http://fonts.googleapis.com/css?family=Permanent+Marker' rel='stylesheet' type='text/css'>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Loek van den Ouweland - Custom Fonts</title>
    <meta name="description" content="">
    <meta name="author" content="Loek van den Ouweland">

  <style>
    h1 {
      font-family: 'Permanent Marker', arial, serif;
      font-size:50px;
    }
  </style>

</head>
<body>
    <h1>Using custom fonts</h1>
</body>
</html>
Run the page in an HTML5 capable browser and view the result.
Written by Loek van den Ouweland on June 13, 2011. Questions regarding this artice? You can send them to the address below.