viernes, 21 de mayo de 2010

Google Font API


Con Google Font API podemos mostrar otras familias de fuentes en nuestro blog, independientemente de las que ya tenemos por defectos en los navegadores.

Para empezar elegir la o las fuentes que mas te gusten de la lista: http://code.google.com/webfonts

Ya elegidas copiar el nombre de la/s fuente/s.

Ejemplo: Tangerine

Si el nombre de la fuente esta separado hay que unirlo con el signo de mas (+)

Ejemplo:  Josefin Sans Std Light

Quedará así: Josefin+Sans+Std+Light

Ya teniendo las fuentes que mas nos gustaron tenemos que integrarlas a la plantilla de blogger.

Iremos a Diseño, Edición de HTML y justo arriba de </head> pondremos el siguiente código:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">

Font+Name tendremos que sustituirlo por el nombre de nuestra/s fuente/s elegida/s.

Así:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">

Si elegimos mas de una fuente, hay que separarlas con (|)

Así:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine|Josefin+Sans+Std+Light|Droid+Sans">

Ahora vamos a ver donde queremos cambiar nuestra fuente dentro de nuesta hoja de estilo CSS como lo hariamos con culquier otra fuente.

Ejemplos:

h1{font-family: 'Tangerine', serif;}

.post blockquote{font-family: 'Josefin Sans Std Light', serif;}

.post{font-family: 'Droid Sans', serif;}

En este caso no tiene que tener el signo de (+).

Guardar Plantilla.

Otra manera es agregar la fuente es directamente en una etiqueta:
<h1 style="font-family:Tangerine,serif;"> EL TEXTO </h1>

También podemos crar una id o clase:(acuerdensen que una id es unica, recomiendo una clase)
.NOMBRECLASE {
font-family:'Tangerine',serif;
}

Podemos definir la clase:
.NOMBRECLASE {
font-family:'Tangerine',serif;
color:#ff0000;
font-size:24px;
}

Y cuando quieramos utilizar la fuente:
<div class="NOMBRECLASE"> EL TEXTO </div>

Lo malo es que no hay disponibles muchos tipos de fuentes.

Ya agregarán mas fuentes, así que hay que estar atentos.

No hay comentarios:

Publicar un comentario