31

Cómo utilizar las fuentes personalizadas de Google en Blogger

Fuentes Google

En Blogger solo podemos utilizar las fuentes habituales disponibles en la mayoría de los de ordenadores (Arial, Courier, Georgia, Impact, Times New Roman, Trebuchet y Verdana).

Esto es así porque, aunque nosotros tengamos instaladas en nuestro PC muchas más fuentes y podamos incluso aplicarlas a nuestro blog, nuestros lectores se limitarán a ver solamente las fuentes que ellos tengan instaladas en su PC.


Eso puede cambiar si utilizamos Google Font API que nos permite utilizar las fuentes disponibles en su Directorio de fuentes en nuestro blog sin importar que fuentes o no tienen instaladas nuestros lectores en sus ordenadores, pues la La API de Google utiliza fuentes que están alojados por Google.

Un ejemplo online podéis verlo en el título del Escaparate, donde hace tiempo utilizo la fuente Droid Serif.


[1] Vamos al Directorio de fuentes y vemos allí la lista de fuentes disponibles.

[2] Pinchamos sobre la fuente que nos interese y después en Preview this font para probar el efecto de algunas de las propiedades que pueden aplicarse a la fuente (tamaño de la letra, espaciado, sombra, etc.).

[3] Para obtener el código que necesitamos, pinchamos en "Get the code" (destacado en azul).
Antes de copiar el código marcamos las casillas para las variantes (Normal, itálica, negrita, negrita itálica) si es que la fuente elegida las proporciona.

Opciones de fuente

[4] El código resultante y que hemos de copiar, será algo como esto:

<link href='http://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet' type='text/css'>

Nota:
Antes de usar el código en Blogger tendremos que añadirle la barra de cierre final para que lo admita:

<link href='http://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet' type='text/css'/>


[5] Pegamos el código antes de la etiqueta </head> de nuestra plantilla.

[6] Para aplicar el tipo de fuente, añadimos en el CSS según donde vamos a utilizarlo lo que en el directorio se nos indica:
font-family: 'Cantarell', arial, serif;

[7] Utilizando una plantilla Mínima de Blogger por ejemplo, lo usaríamos así en el título de nuestro blog:

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font-family: 'Cantarell', arial, serif;
}

Y de esta manera en el título de nuestras entradas:

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-family: 'Cantarell', arial, serif;
line-height:1.4em;
color:$titlecolor;
}

Entradas Relacionadas:

31 comentarios:


JhEfErSoN

Muy buen dato Rosita :)

A hora mismo cambiare la fuente de mi blog.

Abrazos:)

Yurika-Chan

Muy bueno Rosa, pero aun tienen muy pocas fuentes disponibles, será esperar a que hayan más

Harry

Aunque hay pocas fuentes, siempre es agradable disponer de alternativas! Gracias amada rosa!

ZoOm LeóN

Y para aplicar la fuente solo en las entradas, NO EN LOS TITULOS!?

mojul8

Fantástico, siempre quise hacer algo parecido y nunca supe como se hacía, a ver si van poniendo más fuentes y entramos en el siglo XXI de los blogs.. Fantástica entrada

un saludo amiga.

Patri O.

Muy útil Rosa, quizá lo pruebe :)

Drawer 4 Everyone

Y para usar alguna hecha por nosotros? es decir... la fuente que uso para los banner es una que yo mismo he hecho, y me vendría de perlas el poder usarla cuándo me venga en gana.

Negrevernis

Muchas gracias, Rosa.
Ahora sé por qué no podía cambiar una de las fuentes en mi blog: me faltaba el cierre que indicas!!

Un saludo.

JOTAGE2

Muchas gracias x este blog tan fantastico que tienes me a ayudado en muchas ocasiones para mejorar mi blog, asi te enlazare en mi blog porque merece mucho la pena.

© ۞Jair Octavio۞

Buen detalle, era de lo que hemos comentado hace tiempo y ahora e puede lograr, algo limitado, pero estubiera bien si permitieran subir alojar o almacenar mas fuentes para poder utilizarlas...

Ana Laura

Vamos mejorando, no son muchas las posibilidades pero al menos es más que lo que nos ofrecían en blogger. Yo estoy usando el sistema de Cufón en mi blog, pero para próximos blogs me resulta muy interesantes. Gracias!!

sunny

muy bueno rosa me gusto mucho :) ya lo aplique era lo que buscaba muchas gracias saludos.:D


switsait.blogspot.com

Felipe

Si, no son muchas pero con las que hay tenemos para jugar un rato. :D
No se si aún pase, pero al principio vi que habían fuentes que no se podían poner en negrita, ni tampoco la variante small-caps, igual, con tiempito ahi nos daremos cuenta.

Sabes que si me gusta de estas fuentes, y es que precisamente si funcionan siempre porque se añaden con la etiqueta link, a diferencia del cufon que dependiendo del navegador y de cositas varias a veces funca y a veces no.

Poqui Blog

Muy buena información, muchas gracias me ha servido de mucho.

Rosa

ZoOm LeóN Pues lo mismo pero añadido en la parte del CSS que controla el aspecto de las entradas.

Rosa

Drawer 4 Everyone Hablamos de usar o las de Blogger por defecto o las disponibles en el directorio de Google, si usas una tuya los demás no la podrán ver, ya que para que así fuese deberían tenerla instalada antes en su PC.

Drawer 4 Everyone

Ya lo sé, Rosa, lo que te pregunto es haber cómo puedo hacer para subir una fuente y que todo el mundo pueda verla, como este directorio de fuentes. :|

¿sabes cómo rosa mía? :$

Rosa

Drawer 4 Everyone Pues no. :(

ZoOm LeóN

Me puede decir cual es la CSS de la entrada por fa?

Drawer 4 Everyone

No te preocupes, descubriré cómo y te enviaré un correo cuándo lo descubra :)

Marcelo Lemos

@Yurika-Chan Y hace tiempo que tienen esas pocas fuentes. Pero siguen siendo buenísimas, hay otro sitio con muchísimas mas pero no es tan rápido como google fonts a veces se tarda y hace que tu blog tarde.

Rosa

Marcelo Lemos Así es... las de Google son bien rápidas al cargar. :D

Rosa

ZoOm LeóN Depende para que blog sea, en todas las plantillas no es igual...

PaGe

Muchas gracias por el truco :D, acabo de probarlo y me ha encantado.

Damned

Me gusta! Gracias :)

La hormiguita

Si, no son muchas pero abre el abanico... siempre algo es mejor que nada... :)

malachuca

Hola, parece fácil pero yo no quiero cambiar el título del blog ni los titulares de las entradas, sino el cuerpo mismo del artículo, que es prácticamente ilegible. Necesito hacerlo con html porque no es una plantilla blogger y no hace caso de las opciones avanzadas de diseño. Si alguien me hecha una mano estaría muy agradecida.

Rosa

malachuca Y para que blog? Yo leo perfectamente las entradas en el blg de tu perfil :O

Felipe

La verdad te cuento que muchas de esas fuentes me gustan mucho.

Sabes, ya todas las fuentes pueden ser personalizadas con propiedades de text-decoration, font-variant y font-weight.

Adicionalmente, incorporaron un sistema de vista previa genial donde vas probando las ajustes que te gustría realizar y lo mejor, ya pueden ser descargadas a nuestros PC's :)

Ya me he realizado algun par de diseños con esas fuentes, hay unas 3 que me parecen geniales.

Saludos Rosita.!

Rosa

Felipe Si lo he visto, pues yo también ando usando alguna para mis experimentos je,je... y si, no son muchas, pero algunas están rebien. :D

¡Gracias como siempre! :F

-º_Rzm_º-

MUchas Gracias Rosa Por la Info alPrincio no me Funcionaba Porke Me dEcia ALgo de link y puse el COdigo Antes de ]]> eN Igual De Antes de /head

Gracias :) :D

Publicar un comentario en la entrada

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S