Añadir más fuentes en Blogger | Tres Tristes Tigres

lunes, 9 de marzo de 2009

Añadir más fuentes en Blogger

Desde que empecé este blog nunca estuve contento con los tipos de fuentes de texto que deja escoger Blogger. Son míseras 6 fuentes las que puedes escoger: Georgia, Arial, Trebuchet, Courier, Times y Verdana.

Fuentes texto BloggerCon Georgia fue con la que empecé, no esta mal como tipo de letra pero es demasiado clásica quizás.
Arial y Times están demasiado vistas ya.
De Courier mejor no hablamos, está pa lo que está, no como tipo de letra de un blog.
Verdana, psss... tiene las letras demasiado grandes y anchas para mi gusto.
Trebuchet me gusta, es la que más tiempo ha estado en este blog pero misteriosamente se ve horrible en Firefox.

tipografias blogger¿Pero por qué Blogger sólo deja escoger entre estas 6 fuentes? Pues porque cualquiera de estos tipos de letra se mostrará correctamente en cualquier ordenador, tenga el sistema operativo que tenga. Aquí teneís una guía de las fuentes preinstaladas en Linux, Mac y Windows.

Pero vamos al grano ¿Se pueden añadir más fuentes de texto en Blogger? . Hasta ahora la única manera de añadir otra fuente alternativa a las mencionadas 6 que nos ofrece Blogger era escribiendo la entrada en el modo html y en el atributo "font-family" poner nosotros la fuente que queramos como se puede ver en el ejemplo:

<span style="font-family: Helvetica;">Texto del post</span>

 

Tenéis que tener en cuenta que la fuente será visible por el usuario si la tiene instalada en su ordenador. Si queremos añadir más fuentes a todas las partes del blog y no solo al texto de la entrada tendremos que modificar el código fuente de nuestra plantilla en Blogger.
Las variables de los tipos de fuentes y colores están definidas al princpio, podremos modificarlas o incluso añadir alguna nueva. Por ejemplo os pongo la variable que me he creado yo para la fuente del título de las entradas:

Variable name="fuentetitulo" description="Tipo letra título posts" type="font" default="normal normal 140% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 154% 'URW Gothic L', Georgia, Arial, sans-serif"

 

Dentro del campo "value" es donde definimos las fuentes que queremos. Si os fijáis aparecen tres tipos de letra seguidos, esto es por lo que os comentaba antes de que alomejor no tenéis ese tipo de fuente instalado en vuestro ordenador, pues entonces lo intenta con la siguiente de la lista. De esta manera, en el ejemplo que os he puesto, como seguro que casi nadie tiene instalada la fuente "URW Gothic L" ya que es un tipo de fuente Ubuntu lo intenta con la siguiente, Georgia, que sé que todo el mundo la tiene.

En la plantilla de Blogger hay varias variables que definen los tipos de letra:

Bodyfont determina la fuente del texto (el tipo usado genéricamente).
Headerfont determina la fuente de los títulos de la sidebar.
Pagetitlefont determina la fuente del título del blog.
Descriptionfont determina la fuente del texto de la descripción del blog.
Postfooterfont determina la fuente del pie de página de cada entrada.

Se trata de que viendo el ejemplo anterior modifiquéis estas variables a vuestro antojo para mostrar las fuentes de texto que más os gustan.

La variable que he creado yo anteriomente, "fuentetitulo", como es nueva tenéis que indicar en vuestra plantilla donde queréis usarla. Como es para el título de los posts la pondríamos aquí:

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
font:$fuentetitulo
}

Seguramente, al igual que a mi, os surja la pregunta de ¿y como se verá mi blog en Internet Explorer? ¿O como ser verá en Windows con Mozilla? Para comprobarlo, existe una página que os mostrará una imagen de la apariencia de vuestro blog o sitio en todos los sistemas operativos y navegadores con sus diferentes versiones.

Espero que os haya aclarado un poco sobre las tipografías en Blogger, que a mi la verdad me traían loco al principio. Como no soy un experto en la materia y no se si me explico bien del todo seguro que os surge alguna duda, no dudéis en preguntarme.


Nota: La entrada las fuentes de los textos en Blogger escrita en Vagabundia me ha sido de gran ayuda.

Entradas relacionadas:
Freshfonts: Tipografías con Ketchpu

29 comentarios:

Kimy - Chan ^^ dijo...

Woow !
lo voy a intenter ! a ver que tal me va !!

ToKiitaa17 dijo...

jaj gracias yo también lo intentaré =)
aver que tal.. (que soy nueva en esto xD)

DAyara dijo...

Pues yo uso Courier, pero es porque se adapta mejor que cualquier otra al estilo de mi blog.
De todas formas voy a buscar más fuentes aprovechando tu información.
Gracias.

Addax dijo...

¡Muchas gracias, che! Me fue muy útil esta entrada. ¡Un saludo! =)

MI dijo...

gracias muy bueno. pero no me funciona con los gadgets de texto qué hago?

franKeinas dijo...

Hola MI, ¿a qué te refieres con los gadgets de texto?

Greatest-Designs dijo...

Muy buenoo!!

Siempre habia buscado estoo :D

Y con los colores es lo mismo??

Anónimo dijo...

hola, quice hacer esto pero no encontre los codigos que muestras al principio.
busque la palabra "variable" para hacer mas facil la busqueda en la plantilla, y no aparece nada.

que tengo que hacer para poder agregar la fuente que quiero? o puede ser que los codigo que espicifican la fuente este con otro nombre. la plantilla que utilizo no es de blogger, me la baje de por ahi.

saludos

Anónimo dijo...

yo quisiera saber, como hacen para poner por ejemplo EN UN MISMO TEXTO, diferentes tipos de letras, por ejemplo "CASA" en verdana, o "MUÑECO" en georgia etc!

franKeinas dijo...

Anónimo 10, eso es bien fácil. El editor de entradas de blogger ya da esa opción que comentas. Solo tienes que seleccionar el texto que quieras modificar y en la barra de superior del editor de textos verás dos tT que te permitirán escoger las fuentes básicas que comento en este post. Espero haberme explicado bien.

Saludos.

Anónimo dijo...

pues yo si quedé igual, quiero agregar una nueva fuente y a la verdad no entendí debes explicarte mejor...

nika dijo...

muuuchas gracias!!! me ha servido de gran ayuda. Estoy recopilando tipografias en mi blog http://www.tipografiasgratis.blogspot.com y recomendaré tu post a aquellos que tengan dudas sobre el tema!!

franKeinas dijo...

Me alegro que te haya servido nika. Que te vaya bien con tu blog, gracias!!

'Bárby Solánge- dijo...

NO ENTENDÍ :_
POR FAVOR PORDRÍAS EXPLICARME ?

Maval Sanca dijo...

Me da un poco de yuyu cagarla y que se me escuajeringue todo el blog...pero probaré a ver si me deja porque estoy de las 6 fuentes tipicas hasta el higadillo.
Gracias por la ayuda

Locky1_89 dijo...

Me has resuelto un monton de dudas con este blog. Las limitaciones en el blogger con los tipos de letra entran casi dentro de lo ridiculo. Me falta averiguar como cambiar los tipos en el titulo y ya puedo empezar con mi blog.

Por cierto lo del chiste de Forges lo mejor del dia.

Pablo Franco dijo...

Me alegro Locky1_89

Los tipos del título se pueden cambiar seguro, aunque ahora no recuerdo la variable.

Forges siempre es un crack :)

Saludos.

Cande Fernandez dijo...

cuando quiero ponerlas no puedo, osea no me aparece lo de family font

Fuentes dijo...

Hola!

Muy claro! La pena es no poder añadir fuentes de fuera. Pero está muy claro.

Un saludo!
Carlos Fuentes

Tipos de Letras dijo...

Hay muchas webs con fuentes y se puede modificar la plantilla de blogger para que puedas poner otras que no son las que te ofrecen por defecto.
Un saludo!

Mona dijo...

Primero, muchas gracias por tu ayuda en todo, pero tengo una pregunta de la que me temo que sé la respuesta... ¿Para qué comerme la olla diseñando un blog con unas fuentes divertidisimas si al verla desde un ordenador que no tiene dicha fuente se ve con Arial??? No hay forma de que el menú me salga siempre con la letra que yo he elegido? :-(

Un saludo!!

Pablo Franco dijo...

Hola Mona.

Todo depende de las fuentes que escojas. Si escoges fuentes muy extrañas, que no vienen por defecto con Windows por ejemplo, pues tienes pocas probabilidades de que los demás vean la página como tú la has creado.
No se si existe la opción de que obligue a descargar la fuente que tú has escogido al usuario que entre en tu blog, podrías indagar eso. Además supongo que también influye el navegador y como lo tengas configurado.
Es un rollo esto de las fuentes!!

Siento no poder ayudarte mucho más.

Saludos!

lamya dijo...

Hola, yo lo he intentado en mi blog (he copiado lo que tenias para Helvetica y ha funcionado) luego lo he intentado cambiando por calibri y no me sale. Me puedes ayudar por favor?

lamya dijo...

Hola, yo lo he intentado en mi blog (he copiado lo que tenias para Helvetica y ha funcionado) luego lo he intentado cambiando por calibri y no me sale. Me puedes ayudar por favor?

Pablo Franco dijo...

Hola lamya.
Ten en cuenta lo que digo en el post: "Tenéis que tener en cuenta que la fuente será visible por el usuario si la tiene instalada en su ordenador."
Es posible que la fuente Calibri no la tengas instalada en tu ordenador o que tu navegador no la esté reconociendo. Prueba con otro navegador (Firefox o Chrome) y si no intenta asegurarte de que la tienes instalada en tu sistema operativo (Windows o el que uses).

Saludos.

Publicar un comentario en la entrada