Use custom @font-face in CSS3

A great new feature in CSS3 is the ability to import your font to your website without creating an image. This allows the website to not use the default font like arial, tahoma or verdana which are native to most Internet browsers.

@font-face url or src will load the external site to download the required font and then use it.

For example:

@font-face  {
  font-family: 'squealer';
  src: url('/path/to/font/squealer-webfont.eot');
  src: url('/path/to/font/squealer-webfont.eot?iefix') format('eot'),
  url('/path/to/font/squealer-webfont.woff') format('woff'),
  url('/path/to/font/squealer-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
h1 { font: normal 50px "squealer"; }

and then use it

<h1>Use custom @font-face in CSS3</h1>

Demo

Cross Browser Compatibility

Each browser supports different font formats:

• Firefox supports Embedded Open Type (.eot) and TrueType (.ttf)
• IE supports Embedded Open Type (.eot)
• Safari supports OpenType (.otf), TrueType (.ttf), and Scalable Vector Graphics (.xvg)

note: using all types makes your site compatible with most users.

This is an elegant solution for replacing images and make your site loads faster!