Clicky

@font-face, cambiar el tipo de fuente de una página web

@font-face es una regla CSS que te permite descargar una fuente particular

@ font faceDurante la última década, los diseñadores web se han limitado a una selección de cerca de más o menos 13 "fuentes seguras" para la Web. De los cientos de miles de fuentes disponibles, esto es obviamente una gran limitación.

Si bien teóricamente es posible utilizar para un sitio web cualquier tipo de letra que desee, a fin de que funcione correctamente cada visitante debe tener esa fuente en particular cargada en su ordenador. Debido a este requisito, la tipografía web ha sido un terreno baldío, limitada a sólo una corta lista de fuentes disponibles para la Web.

 

Las nuevas normas de hojas de estilo en CSS3 admiten la selección de @font-face que - a diferencia del trabajo que dan otras técnicas - es fácil de usar.

Sólo tienes que subir a tu servidor los archivos de la fuente que deseas utilizar - asegurándote de que no estás violando ninguna regla de derecho de autor - e integrarlas utilizando la instrucción @font-face en nuestra hoja de estilo css que maneja la apariencia de las fuentes.

NOTA: @font-face es una regla CSS que te permite descargar una fuente particular de tu servidor para hacer una página web si el usuario no tiene esa fuente instalada. Esto significa que los diseñadores web ya no tienen que adherirse a un conjunto particular de fuentes "web seguras" que el usuario haya pre-instalado en su ordenador.

En este artículo veremos cómo poner un nuevo tipo de fuente en el texto de nuestras páginas web que se aplicará a todo el sitio, desde titulares a el texto de cada artículo.

Con este sistema podremos, además, elegir un tipo de letra personalizado entre cientos disponibles gratuitamente.

Vamos a utilizar dos lugares, aunque hay muchos más si buscamos en Google por "web fonts ttf", que ofrecen fuentes gratis para escoger la que más nos guste: Google Web font y Font Squirrel.

El procedimiento consta de fundamentalmente de tres pasos: Conseguir un archivo de fuentes ttf, convertir este archivo en otros formatos legibles para los navegadores (.eof, .ttf, .woff) y aplicarlos en nuestro site subiendo estos últimos archivos al servidor y modificando la hoja de estilos css. Los vemos detalladamente:

1) Conseguir archivos de fuentes ttf gratis: Google web fonts

Google web fonts

En este momento Google web fonts ofrece 501 archivos de fuentes ttf completamente gratis. Según vayamos desplazando hacia abajo el scroll por la página tendremos la oportunidad de elegir varios tipos de fuentes que añadiremos a nuestro "carro de compras gratuito" pinchando en Add to Collection.

Google web fonts, elegir fuentes

Para obtener las fuentes que hemos elegido pincharemos en el botón "Use" en la parte inferior derecha y aparecerá una nueva pantalla:

Google web fonts, usar

En la parte superior podremos marcar o desmarcar las fuentes que teníamos previamente elegidas y conservar la que nos gusten. A la derecha podemos ver un test de velocidad de carga de esas fuentes en la web. En el apartado 2 podemos elegir el tipo de caracteres.

Google web fonts, usar

El apartado 3 nos ofrece el código que deberemos insertar en el <head> de nuestra página para que los navegadores puedan utilizar estas fuentes.

<link href='http://fonts.googleapis.com/css?family=Tienne|Handlee|Oxygen|Mrs+Sheppards' 
rel='stylesheet' type='text/css'>

Finalmente en el paso 4 nos indica las instrucciones que debemos escribir en los archivos .css de nuestro sitio para utilizar las fuentes:

font-family: 'Tienne', serif;
font-family: 'Handlee', cursive;
font-family: 'Oxygen', sans-serif;
font-family: 'Mrs Sheppards', cursive;

(en este artículo no emplearemos este método, que profundizaremos en uno próximo, y que permite usar fuentes diferentes, por ejemplo, en titulares y texto)

Para obtener el archivo ttf de estas fuentes, que era nuestro objetivo, deberemos pinchar en "Download your Collection" justo encima del dibujo del test de velocidad. Se abrirán dos pantallitas para descargar un archivo en formato comprimido .zip llamado fonts.zip.

Google web fonts, descargar ttf

Si lo descomprimimos (yo uso el popular 7-zip) veremos que contiene cuatro carpetas, una por cada fuente que hayamos elegido:

archivo fonts.zip

Y dentro de cada una de ellas está el archivo .ttf que andábamos persiguiendo, (por ejemplo Oxygen-Regular.ttf).

2) Convertir archivo de fuentes tff para ser utilizado con @font-face

En el siguiente paso vamos a transformar el archivo Oxygen-Regular.ttf, que tomaremos como ejemplo, en varios archivos .eof, .ttf, .woff para posteriormente subirlos a nuestro servidor. Una página que ofrece este servicio es Font Squirrel, donde además podemos conseguir otras 773 fuentes gratis.

Para ello nos vamos a @font-face generator (ojo, no funciona en Internet Explorer) y desde el recuadro @font-face kit generator (marcaremos Yes, the fonts I'm uploading are legally eligible for web embedding.) pinchamos en "+ Add Fonts" y elegimos en nuestro ordenador la que queremos utilizar:

@ font face, subir fuente

Para, a continuación, pinchar en el botón "Download Your Kit" y guardar un archivo .zip (en este caso webfontkit-20120512-120153.zip) en nuestra computadora.

@ font face, descargar

@ font face, descargar

Si extraemos el contenido del archivo .zip veremos que aloja los archivos .eof, .ttf, .woff que andábamos buscando en nuestro segundo objetivo, que felizmente hemos cumplido.

archivos @font face

3) Implementar @font-face en una página web

Este último trabajo se compone de dos sencillas partes, subir los archivos al servidor y modificar nuestra hoja de estilo css.

Subiremos los archivos necesarios al servidor mediante una aplicación de FTP (Yo uso FileZilla), en este caso:

oxygen-regular-webfont.eot
oxygen-regular-webfont.ttf
oxygen-regular-webfont.woff

Y los colocaremos en la carpeta donde estén nuestros archivos de hoja de estilo css (En este caso, con Joomala 2.5 y la plantilla Beez_20 están en la ruta /templates/beez_20/css (también se puede crear una carpeta llamada, por ejemplo, fonts para colocar allí los diversos archivos de fuentes, deberíamos modificar entonces la ruta en la regla @font-face).

subir archivos al servidor

Ahora, y en la misma carpeta donde hemos descomprimido el archivo .zip webfontkit-20120512-120153.zip generado desde @font-face generator, veremos que hay un archivo llamado stylesheet.css con las reglas necesarias para que funcione @font-face:

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on May 12, 2012 */
@font-face {
font-family: 'OxygenRegular';
src: url('oxygen-regular-webfont.eot');
src: url('oxygen-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('oxygen-regular-webfont.woff') format('woff'),
url('oxygen-regular-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

Estas instrucciones las colocaremos al principio de nuestro archivo css que controla la apariencia de nuestras fuentes (en el caso de esta página se llama personal.css) generalmente donde encontramos la etiqueta body {, a la que también deberemos añadir la línea font-family: 'OxygenRegular'; , por ejemplo :

body {
background: #e0dedf  url(../images/personal/bg2.png) repeat-x;
color: #333;
font-family: 'OxygenRegular';
}

En otro artículo veremos cómo utilizar varias fuentes diferentes en nuestras páginas, con este método y el todavía más sencillo de Google web fonts.

Jesus_Caceres