AcastilloG

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":

OpenType "otf":

Embedded OpenType "eot":

Scalable Vector Graphics "svg":

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

¿Qué formato debo usar?:

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:

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.