CSS Click Chart

Web Fonts with @font-face

Allows embedding of custom, appropriately licensed fonts using the @font-face at-rule.

Specification

@font-face on W3C

Example Code

@font-face {
  font-family: 'Alex Brush';
  src: url('../fonts/alexbrush.woff2') format('woff2'),
       url('../fonts/alexbrush.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

h1 {
  font-family: 'Alex Brush', serif;
}

Live Demonstration

Below is a custom font embedded using @font-face

Bulletproof Web Fonts

Browser Support

Can I Use fontface? Data on support for the font-face feature across the major browsers from caniuse.com.

Tools / Polyfills

Font Squirrel's @font-face Generator

Tutorials / Articles