Google Web Fonts nos ofrece cientos de fuentes para ser usadas en nuestro sitio web y así hacerlo más atractivo, con más personalidad. Vamos a descubrir más acerca de este recurso y cómo usar esas fuentes con CSS.
Figura 1. Euphoria Script es una preciosa fuente creada por Sabrina López y disponible en Google Web Fonts.
En primer lugar, accedemos a Google Web Font, que se encuentra en la siguiente dirección:
http://www.google.com/webfonts
Así llegamos a un sitio web con un aspecto similar a la figura 2. En la columna de la derecha se muestra el número de fuentes disponibles, el buscador interno y diversos filtros. En la zona central de la página vemos el listado de fuentes y una muestra.
Figura 2. Google Web Fonts.
Ahora sólo queda encontrar aquella que nos guste y, posteriormente, hacer clic en la opción Quick-use que hay en la parte inferior del cuadro de la fuente. Tras esto, se muestra una página como la que vemos en la figura 3, donde se indican los pasos a seguir para usarla:
- Elegir el estilo deseado. También se informa del impacto que tiene la fuente seleccionada en la carga de la página.
- Elegir el juego de caracteres que deseamos.
- Incluir en nuestro sitio web la fuente.
- Especificar que queremos aplicar la fuente en los elementos deseados de un sitio web. Hacemos uso de CSS.
Figura 3. Información e instrucciones de uso de una fuente en Google Web Fonts.
Por ejemplo, si decidimos usar la fuente “Euphoria Script”, creada por Sabrina López, incluiremos la siguiente línea de código dentro del elemento <head> del documento HTML.
<link href='http://fonts.googleapis.com/css?family=Euphoria+Script' rel='stylesheet' type='text/css'>
Con esto ya hemos incluido de alguna forma la fuente “Euphoria Script” en nuestro sitio web. Ahora, podremos aplicarla a los elementos que deseemos mediante la propiedad font-family de CSS, como se muestra en el siguiente ejemplo, que aplica esta fuente al elemento <h1>.
h1 {
font-family: 'Euphoria Script', cursive;
}
Por supuesto, podemos aplicar las propiedades o efectos de CSS3 a estas fuentes, como pueden ser las sombras y la rotación.
Ah! ¿Que has creado una fuente y quieres compartirla en Google Web Fonts? Entonces debes ponerte en contacto con Google a través del formulario que encontrarás en la siguiente dirección:
https://services.google.com/fb/forms/submitafont/
Esta forma de usar fuentes es muy fácil y rápida, ¿verdad?
Publica tu comentario
