Incluir fuentes en una web

Cuando utilizamos diversas fuentes en nuestros documentos, siempre tenemos la precaución de tener esas fuentes instaladas previamente en nuestro equipo. El problema nos viene cuando utilizamos esas fuentes en nuestra página web. 

Para poder utilizar fuentes que no sean de sistema en nuestra web debemos utilizar la característica @font-face de CSS3. Es cierto que esto lleva funcionando desde CSS2, pero es con CSS3 donde se puede utilizar completamente.

Si queremos utilizar una fuente, lo primero que tenemos que hacer es identificarla y verificar que es de uso libre, o sino, pagar la licencia o pedir permiso para utilizarla.

Las propiedades que podemos utilizar son las siguientes

font-family (requerido): Nombre de la fuente

src(requerido): Define donde está la fuente. Se puede expresar con url() o con local() si la fuente se quiere coger del ordenador local. Se especifica el formato del archivo. El formato woff es compatible en todos los navegadores (ie desde versión 9). Los formatos posibles son lo siguientes:

• woff – Web Open Font Format (.woff)
• truetype (.ttf)
• opentype (.otf, ttf)
• embedded-opentype (.eot)
• svg (.svg, .svgz)

font-stretch(Opcional):  define el aspecto de la fuente, por defecto es “normal” Los valores que pueden ser

• normal
• condensed
• ultra-condensed
• extra-condensed
• semi-condensed
• expanded
• semi-expanded
• extra-expanded
• ultra-expanded

font-style (opcional): define el estilo de la fuente

• normal
• italic
• oblique

font-weight (opcional): Define el ancho de la fuente (normal, bold, 100…900). Por defecto es “normal”

unicode-range (opcional): Rango unicode de caracteres que la fuente soporta. Por defecto es “U+0-10FFFF”

Compatibilidades

Ejemplos

@font-face {
    font-family: 'Open Sans';
    src: url('open-sans.eot');
    src: local('icomoonregular'),
         url('open-sans.eot?#iefix') format('embedded-opentype'),
         url('open-sans.woff') format('woff'),
         url('open-sans.ttf') format('truetype'),
         url('open-sans.svg#open-sans') format('svg');
}

@font-face {
    font-family: 'futural';
    src: url('futural-webfont.woff2') format('woff2'),
         url('futural-webfont.woff') format('woff'),
         url('futural-webfont.ttf')  format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 400;
    src: local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v11/0dTEPzkLWceF7z0koJaX1A.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

@font-face {
    font-family: 'Raleway';
    font-style: italic;
    font-weight: 400;
    src: local('Raleway Italic'), local('Raleway-Italic'), url(https://fonts.gstatic.com/s/raleway/v11/IIm-lPOtfVKQy0GMiczF_1tXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}