Google Web Fonts: ampliando las tipografías web

Google Fonts

Google Fonts

Tradicionalmente, a la hora de crear páginas web, sólo podían utilizarse unas pocas tipografías genéricas que todos los navegadores leían bien. Si usábamos una tipografía no genérica, sólo la vería bien aquel usuario que la tuviese instalada en su ordenador; en caso contrario, se mostraría otra genérica que cambiaría el aspecto que se le quería dar.

La “colección” de tipografías genéricas es limitada, y suelen repetirse las mismas: Arial, Verdana, Georgia, Tahoma, Times New Roman, etc… ahora, gracias a (como no) Google, podemos ampliar esa colección con varias fuentes más.

Son fuentes Open Source, que podemos integrar en nuestra web con la seguridad de que se va a ver en todos los ordenadores, sin necesidad de que el usuario tenga que instarla. Para ello, sólo tenemos que ir a la web de Google Web Fonts, http://www.google.com/webfonts , elegir la tipografía que queramos usar, y seguir las sencillas instrucciones de uso, que se resumen en 2 pasos muy fáciles:

1. “Llamar” a la tipografía, que está dentro de la colección de fuentes de Google, añadiendo una línea en el de nuestra web. En la web de Google Web Fonts, al pulsar en cada tipografía, muestran este código.

2. En nuestra hoja de estilos CSS, establecer el atributo “font-family” indicando la tipografía que vamos a usar. Además, podemos usar otros atributos para modificar el texto: negrita, espacio entre letras, tamaño, etc.

Desde la propia web de Google Web Fonts podemos escribir textos y cambiar sus estilos, para tener una vista previa de cómo va a quedar exactamente.

El título principal de mi web, www.joaquinbastaros.com , es un ejemplo de cómo usar Google Web Fonts en una web.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s