Use of @font-face

Almost all web browsers(including the dinosaur browser IE6) support the web font property @font-face. Its usage is:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Now we are entering the modern web browser age, the WOFF format of font is supported extensively, so now we usually only need to write:

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
       url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

or only with WOFF:

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff') format('woff')ï¼› /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

Then after defining the font face, we can use it in our CSS code as:

body {
  font-family: 'MyWebFont';
}

Some basics about @font-face

Before the creation of @font-face, developers can only use the built-in fonts from the operating system. And frequently different users have different fonts installed on their system. With the creation of @font-face, people can download customized fonts from Internet and use them on their sites, this will not depend on the fonts installed on user's system anymore. It brings great vividness to our websites.

The speed of web font loading

You must know that the size of font file may be very large, it will take extra HTTP connection and time to download them, this in turn may slow down your site load speed. So before we are considering using @font-face, we have to figure out its pros and cons and then judge whether we should use it or not.

If you decide to use a customized font, you can adopt a flexible strategy, i.e, load as little font characters and font styles as possible. For example, if you use Google font, you can load only the needed characters or styles by:

@import url(http://fonts.googleapis.com/css?family=Averia+Sans+Libre:400,300italic,700);

Different types of web font format

Several popular web font formats are: WOFF, SVG, EOT and OTF/TTF.

WOFF

WOFF, Web Open Font Format, is created for web use, it was jointly developed by Mozilla and some other companies. WOFF usually takes less time to load because it uses storage structure and compression algorithms sed by OpenType and TrueType. There is a trend that this font format will rule the font format world and now all modern browsers support this font format.

SVG/SVGZ

SVG, SCalable Vector Graphics, is a vector font format and it's suitable for handphone display. Only the Sfari prior to 4.1 version on iPhone supports it. Firfox and IE doesn't support it.

EOT

EOT, Embedded Open Type, was created by Microsoft. It is supported by IE6/IE8 only.

OTF/TTF

OpenType Font and TrueType Font are loved by designers, but they are easily copied by others, so their may be copyright issue. This font format was created by Microsoft as well, Adobe has also contributed to this format.

Chinese version : http://www.webhek.com/font-face/