Estilo CSS

  • Proporciona la variante WOFF 2.0 para los navegadores que la admitan.
  • Proporciona la variante WOFF para la mayoría de los navegadores.
  • Proporciona la variante TTF para navegadores Android previos (anteriores a la versión 4.4).
  • Proporciona la variante EOT para navegadores IE anteriores (previos a IE9).

Fuente: google developers


@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome.woff2') format('woff2'),
       url('/fonts/awesome.woff') format('woff'),
       url('/fonts/awesome.ttf') format('truetype'),
       url('/fonts/awesome.eot') format('embedded-opentype');
}

@font-face {
  font-family: 'Awesome Font';
  font-style: italic;
  font-weight: 400;
  src: local('Awesome Font Italic'),
       url('/fonts/awesome-i.woff2') format('woff2'),
       url('/fonts/awesome-i.woff') format('woff'),
       url('/fonts/awesome-i.ttf') format('truetype'),
       url('/fonts/awesome-i.eot') format('embedded-opentype');
}

Herramienta: www.fontsquirrel.com