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.
0 comments:
Post a Comment