All about using custom fonts with @Font-face

After the introduction of @font-face with CSS 3.0, it has become incredibly easy to include the custom fonts in your website. The use of @font-face rule is increasing rapidly with the support of almost all web browsers. It is supported in all modern web browsers like Firefox, Chrome, Safari, Opera and Internet Explorer. Fonts are useful not only for readability but it also acts as the first impression for the contents of the website. For professional websites, web designers tend to use sleek looking sans-serif fonts like Arial and Verdana. On the other hand, if the website is on funny note, it matches better with Comic Sans or other similar fonts.
custom-font
Now, with @font-face, web designers are not restricted to use web safe fonts which are installed on the visitor’s computer. Having the capability to embed the custom font in website is a great option for web designers to show their creativity. In this article, we will discuss everything you need to know about @font-face rule and practical examples to include custom fonts in your website.

Why @font-face?

Earlier, the web developer and designers who wanted to use the custom fonts have a couple of options like sIFR and Cufon which uses JavaScript, flash and SVG to render the fonts in the web pages. But the designers were looking at some easy to use and light weight alternative. With introduction of @font-face rule with CSS3, it is really easy to implement the custom fonts without using a line of JavaScript or using flash. The fonts are downloaded from the defined urls on the fly and displayed in the web page. It means that you can upload your own font or use the services of a web font provider.

@font-face Syntax

Here is the syntax for @font-face rule.

@font-face {

[font-family: <family-name>;]?

[src: [ <uri> [format(<string>#)]? | <font-face-name> ]#;]?

[unicode-range: <urange>#;]?

[font-variant: <font-variant>;]?

[font-feature-settings: normal|<feature-tag-value>#;]?

[font-stretch: <font-stretch>;]?

[font-weight: <weight>];

[font-style: <style>];

}

Here the first two arguments i.e. font-family and src are required. All other arguments are optional.

  • font-family: This is the specified font name which is used to define the font-face value for font properties. You can put a name here as per your convenience.
  • src: URL of the font location. It can be on your web server or any other domain.
  • font-stretch: Defines the stretch of the font. You can select from normal, condensed, ultra-condensed, extra-condensed, semi-condensed, expanded, semi-expanded, extra-expanded and ultra-expanded. This field is optional and default value is normal.
  • font-weight: This is an option field and default value is normal. You can specify the font-weigh with numerical values like 100,200,400,700, etc.
  • font-style: You can select from normal, italic and oblique. This is again an optional field and default value is normal.

 Example

Here is a simple example demonstrating the use of @font-face rule. For simplicity of demonstration, I will declare the styles in html file itself. However, for actual use, you should always prefer an external stylesheet.

First of all, we will define the @font-face rule in style.

<code>@font-face {</code>
<code>  font-family: myFont;</code>
<code>  src: url(SnowburstOne-Regular.woff);</code>
<code>}</code>

As you can see, the actual font is SnowburstOne-Regular which is free for commercial use and available for download at Google Web Fonts. For my convenience, I have defined the font-family as myFont. With this, it becomes easier to define this font name anywhere in your CSS file or style statement.

Now, we define this font face for the web page body and declare the font-size.

body {
            font-family: myFont, sans-serif;
            font-size: 50px;
    }

That’s it!

The complete code of html file is here:

<html>
<head>
  <title>Custom Web Font with @font-face - Example</title>
  <style type="text/css">
    @font-face {
      font-family: myFont;
      src: url("SnowburstOne-Regular.woff");
    }   
    body {
            font-family: myFont, serif;
            font-size: 50px;
    }
  </style>
</head>
<body>
@font-face allows you to use custom fonts in you website like this SnowburstOne-Regular font.
No need to stick to Arial, Verdana or Times New Roman.
</body>
</html>

You may like to preview the output of @font-face rule.

If you want to use a web font which is available on a different domain, you just need to change the src value like this.

@font-face {
  font-family: myFont;
  src: url('http://www.webtutorialplus.com/demo/custom-fonts/Sansation_Light.woff');
}

Supported formats for font embedding

Now that you know how to embed the custom fonts in your website, let’s have a look at the available font formats and their browser support.

For use in web pages, the World Wide Web Consortium (W3C) has set the standard as WOFF (Web Open Font Format). All modern browsers now support this font format. It is expected to be the single format for use in websites. It is essentially a compressed version of the same table-based sfnt structure used by TrueType, OpenType, and Open Font Format, but adds metadata and private-use data structures, including predefined.

Internet Explorer was first to support @font-face rule from IE4 version. But IE8 and earlier support only Embedded OpenType (EOT) file (.eot or .ote format).

Here is the table which illustrates the support for various font formats.

  WOFF OTF TTF SVG EOT
IE 9 9 9 no 4
Firefox 3.6 3.5 3.5 no no
Opera 11.1 10 10 10 no
Opera Mobile 11.0 9.7 9.7 9.7 no
Safari 5.1 3.1 3.1 3.1 no
Chrome 6 4* 4* 0.3 no
Safari on iOS 5 no 4.2 3.1 no

Font Squirrel allows you to convert your custom font from any format to WOFF. It is recommended to use WOFF because it is faster to download due to small file size, well supported by web browsers and is more search engine friendly. Just make sure you have the license to use the font in your website.

Where you can get the free fonts for your website

Here is the list of great places where you can get the free fonts to embed on your website.

  1. Google Web Fonts
  2. Adobe Edge Fonts
  3. Font Squirrel
  4. Open font library

So, nothing stopping you now to get away from old boring web safe fonts. Go, grab some cool custom fonts and embed them in your websites with @font-face!

Leave a Reply

Your email address will not be published. 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>