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

@font-face permite cargar fuentes personalizadas en una página web.

**Los archivos de fuentes deben estar en el mismo dominio**, a menos que los controles de acceso HTTP sean utilizados para relajar esta restricción.
:x:

WOFF

Para la web **se recomienda usar el formato de fuente WOFF**, que es compatible con todos los navegadores desde 2012
:heavy_check_mark:
  1. WOFF es esencialmente OpenType o TrueType con compresión y metadatos adicionales.
  2. Los desarrolladores web a menudo cometen el error de usar TTF en lugar de WOFF para un sitio, por que las fuentes Truetype (TTF) se usan localmente en iMac y PC.
  3. Támbien existe WOFF2 que es la próxima generación de WOFF y cuenta con una mejor compresión que el original.
  4. Puedes generar todos los archivos requeridos (.ttf, .woff, .svg, .eot) en Online font converter a partir de una fuente.

Iconos

Con @font-face se puede cargar fuentes con íconos. Sin embargo, creo que es mucho mejor usar SVG como un sistema de íconos.