Martes 01/05/2018

ETIQUETA | Internet

Recientemente he cambiado el tipo de letra de este sitio web. Para ello he necesitado importar los nuevos tipos con la regla @font-face, cuyo empleo resumo a continuación.

La regla @font-face nos permite usar, en nuestras páginas web, cualquier tipo de letra aunque no se encuentre instalada en el ordenador de la persona que visite la página. Antes de su existencia, los programadores estaban obligados a usar las “fuentes seguras”, (web safe fonts), denominadas así porque se suponía que estaban instaladas en todos los ordenadores. Sin embargo, no había ninguna garantía de que, la página, se mostrara con la fuente deseada.

Afortunadamente, todos los navegadores modernos (Firefox, Chrome, Safari, Internet Explorer/Edge, Opera...), permiten la importación de fuentes tipográficas y su sintaxis es muy sencilla:

@font-face {
font-family: "Nombre_de_la_fuente";
src: url(ruta_de_la_fuente);
}

Con "font-family" le damos nombre a la fuente y con "scr" indicamos la ruta donde se encuentra. Estas dos propiedades (font-family y src) son obligatorias, pero es posible añadirle otras opcionales ("font-weight", "font-style", "font-stretch" y "unicode-range") que pueden omitirse. Si se omiten, toman los valores predefinidos "por defecto".

Por ejemplo, para importar la nueva tipografía que he instalado en esta página, "Open Sans", es necesaria la siguiente sintaxis:

@font-face {
font-family: "Open Sans";
src:url('fonts/OpenSans.woff');
}

Como puede observarse la url de la fuente es "fonts/OpenSans.woff" ya que está alojada en el subdirectorio "fonts" con diferentes estilos "regular", "itálica", etc. Además uso "Alegreya Sans SC" en los encabezados.

Para usarla hay que "llamarla" con:

font-family: "Open Sans", sans-serif;

Otra cuestión que tenemos que considerar son los formatos utilizados para almacenar los archivos de fuentes, ya que cada navegador "tiene sus preferencias". Los más usuales son:

TrueType "ttf":

Desarrollado, inicialmente, por Apple Computer a finales de la década de los ochenta, es uno de los más populares y admitido por la mayoría de los navegadores.

OpenType "otf":

Es un formato de tipos de letra escalables basado en TrueType. Similar, en uso y difusión, al "ttf".

Embedded OpenType "eot":

Desarroyado por Microsoft para usarlo en la web, es una forma compacta del "Open Type". Usado, exclusivamente, por Internet Explorer. La W3C lo ha declarado "no estandar" y desaconseja su uso.

Scalable Vector Graphics "svg":

Es un formato vectorial escalable que permite el redimensionado sin pérdida de calidad. Usado por Chrome, Safari y Opera

Web open font format "woff" y "woff2":

Está pensado para usarse en páginas web y recomendado por World Wide Web Consortium (W3C). Cuenta con un sistema de compresión que mejora bastante el rendimiento. Actualmente es utilizado por todos los navegadores modernos.

¿Qué formato debo usar?:

El formato "woff" está cada vez más extendido, es el recomendado por W3C y todas las nuevas versiones de navegadores lo adoptan. Sin embargo, es posible que usted quiera asegurarse que su página se vea bien en la mayoría de navegadores y quiera usar todos los formatos.

Existen páginas que aportando un tipo de letra en cualquier formato, por ejemplo ttf, nos devuelve la letra convertida a todos los formatos y la regla @font-face con la sintaxis correcta para incluirla en nuestro CSS. Una de estas páginas es transfonter.

Yo he subido a este enlace la fuente "Open Sans" en formato ttf y me ha devuelto un archivo zip con la fuente en estos formatos: ttf, otf, eot, svg, woff y woof2. Además un archivo de nombre "stylesheet.css" con este contenido, que debemos incluir en el CSS:

@font-face {
font-family: 'Open Sans';
src: url('OpenSans.eot');
src: url('OpenSans.eot?#iefix') format('embedded-opentype'),
url('OpenSans.woff2') format('woff2'),
url('OpenSans.woff') format('woff'),
url('OpenSans.ttf') format('truetype'),
url('OpenSans.svg#OpenSans') format('svg');
font-weight: normal;
font-style: normal;
}

Para usarla solo hay que "llamarla" con:

font-family: "Open Sans", sans-serif;

Hemos añadido "sans serif" para asegurarnos de que se utilizará una letra de "palo seco" caso de que el navegador sea muy antiguo y no contemple la regla @font-face.

También es posible utilizar el método “@import”, para importar fuentes directamente de otros servidores. Por ejemplo, para importar "Open Sans" desde Google Fonts, entre en esta dirección para obtener el código:

Google_Fonts

En el caso que nos ocúpa, la síntaxis Sería:

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

Pero este método crea algunos problemas que afectan a la velocidad, ya que los archivos se cargan secuencialmente (uno después del otro), con la consiguiente pérdida de tiempo.

Aunque la perdida de velocidad no sea muy importante, prefiero no depender de un servidor externo y tenerlo todo alojado localmente. Así que aconsejo, preferentemente, utilizar @font-face.

§