@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.

Want to become a better web developer?

Join over 20,000 other developer & designers who get awesome links to the best news and articles each week delivered directly to their inbox.

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 *