@Font-Face

A super useful feature of CSS3 is the @font-face rule. It allows you to specify a font for the page that may not already be on the client’s system.

In your CSS file declare you font:


@font-face {
  font-family: 'AwesomeWebFont';
  src: url('myfont.eot?#') format('eot'),  /* IE6–8 */
       url('myfont.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
       url('myfont.ttf') format('truetype');  /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}

Then call it using font-family:


h1 { font-family: AwesomeWebFont, sans-serif; }

To easily create a @font-face kit, the Font Squirrel Generator is super handy.

This post currently has no responses. What do you think?

You can use basic HTML when posting code, please turn all < characters into &lt; or > into &gt;
If the code is multi-line, use <pre><code></code></pre>

Leave a Reply

Your email address will not be published. Required fields are marked *