Google nos lo pone aun más fácil y ha creado un directorio de fuentes libres que podemos enlazar directamente desde nuestra web.
Las tipografías actualmente disponibles:
Os voy a explicar brevemente como enlazar las tipografías de Google para que las podáis utilizar en vuestros proyectos:
- Vamos al directorio de Google Fonts y elegimos la fuente deseada.
- En el menú de opciones de la tipografía pulsamos "Get the code".
- Dentro de "Get the code" podemos seleccionar el estilo de la tipo (no todas tienen esta opción) y justo debajo se genera el "link" que necesitamos.
- Copiamos el link generado y lo pegamos en el "HEAD" de nuestra web, por encima del CSS:
<head>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href='estilos.css" rel='stylesheet' type='text/css'>
... - Por último desde la hoja de estilos o desde los estilos en linea hacemos uso de la nueva fuente, en mi caso la "Lobster" y le añado 2 fuentes alternativas para los navegadores que no soporten CSS3 (por ejemplo Internet Explorer 8 e inferiores):
body{
font-family: 'Lobster', arial, serif;
}
El ejemplo terminado:
Si queremos utilizar varias tipografías simultáneamente sólo tenemos que añadir tantos "link" de las fuentes como queramos y crear nuevas clases.
Por último recordar que sólo los navegadores más modernos tienen soporte para CSS3 (Firefox 3, Safari 4, Google Chrome, Opera 10).
Entradas
No hay comentarios:
Publicar un comentario
Nota: solo los miembros de este blog pueden publicar comentarios.