Aún cuando uno use plantillas personalizadas que no pertenecen al nuevo sistema de diseño de Blogger, instalar nuevas fuentes es tremendamente sencillo, simplemente hay que ir a la página específica de cada fuente de letras, copiar un código y pegarlo en nuestra plantilla. Es un simple copy-paste, que debemos realizar tan solo una sola vez por cada fuente que queramos añadir.
Para seleccionar la nueva fuente.
El primer paso será visitar el directorio de fuentes de Google y elegir la fuente que más nos guste. Podemos verlas en forma previa y elegir la que más nos llame la atención, incluso podemos ir eligiendo varias si no nos conformamos sólo con una y queremos utilizar un tipo de fuente distinto dependiendo de la situación, del post, de si es en un widget, etc…
http://www.google.com/webfonts
Tomar la fuente.
Una vez nos hayamos decidido por una en particular (o varias, pero centrémonos en cómo conseguir una), tendremos que guardar el nombre exacto de la fuente para poder utilizarla luego bien.
Instalar la fuente en nuestra plantilla.
Recuerda que antes de cualquier modificación debes guardar una copia de tu plantilla por si algo sale mal.
Con el código de la fuente ya copiado nos dirigimos al panel de control del blog y vamos a Diseño – Edición de HTML y con Ctrl-F buscamos el código.
<head>
Localizada esa parte pegaremos justo abajo el siguiente código agregando en la zona marcada en rojo el nombre de la fuente que hemos elegido y guardaremos los cambios. (en el ejemplo la fuente es Oswald)
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
Utilizar la fuente.
Cuando queramos utilizar la fuente, ya sea en posts, widgets, etc… tendremos que buscar donde se ha definido el estilo de letra y anteponer la que hemos instalado. Por ejemplo:
Si instalaste la fuente Oswald, habrás puesto un código similar a este:
<head>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet'
type='text/css'/>
Para que funcione en los títulos de tus post deberás encontrar por ejemplo el siguiente código u otro similar de tu plantilla:
h2 {
margin:0 0 10px;
font:20px Arial, georgia, times, 'times new roman', serif;
font-weight: normal;
text-shadow: 1px 1px 1px #505050;
line-height: 1.4em;
text-transform:none;
letter-spacing:0em;
color:#000;
padding:5px 10px;
}
Y agregar tu nueva fuente como principal
h2 {
margin:0 0 10px;
font:20px Oswald, Arial, georgia, times, 'times new roman', serif;
font-weight: normal;
text-shadow: 1px 1px 1px #505050;
line-height: 1.4em;
text-transform:none;
letter-spacing:0em;
color:#000;
padding:5px 10px;
}
De esta forma si no llegara a estar disponible la api de la fuente Oswald se usaría la siguiente en orden de prioridades (aquí Arial).
Puedes modificar de esta forma cualquier área donde se use un tipo de letra o font.
Guarda los cambios y disfruta del nuevo diseño.
Si te ha gustado el artículo inscribete al feed clicando en la imagen más abajo para tenerte siempre actualizado sobre los nuevos contenidos del blog:
Puzzle Bobble
Karate Blazers
Puzzle De Bloques
Magical Cat Adventure