Vivir Sencillamente para ser feliz

Trucos, ofertas, bricolaje, manualidades, posicionamiento, SEO, Blogs...

Cómo añadir tipos de letra en Blogger (I)


Agregar tipos de letra personalizadas en Blogger puede mejorar la apariencia de tu blog. Antes de explicar como añadirlos,  es bueno saber cómo funcionan los tipos de letra en blogger.



En las plantillas de blogger, se  puede utilizar cualquier tipo de letra que se desee, pero se podrá ver correctamente sólo si el usuario que ve la página tiene ese tipo de letra instalado en su ordenador.

Mediante la técnica de incrustación de tipos de letra, es posible utilizar cualquier fuente en tu blog y  se podrá ver a los espectadores, incluso si no tienen el tipo de letra instalado en sus ordenadores.

Estos son algunos métodos alternativos para añadir fuentes personalizadas a tu blog:

  1. Google Font API
  2. Kernest Font API
  3. Cufon JavaScript Font Embedding

1. Google Fonts API.

Este es el mejor método y el más robusto para agregar tipos de letra personalizados a tu blog. Utiliza la técnica de @ font-face, pero no necesitas preocuparte sobre los recursos del sistema, que es el problema de la técnica @ font-face en blogger . Puedes ver la lista de tipos de letra disponibles en el directorio de tipos de letra de Google. Cuando se selecciona un tipo de letra en particular, Google te proporciona el código a usar en tu blog.
Algo así:

<link href='http://fonts.googleapis.com/css?family=FontName' rel='stylesheet' type='text/css'>
Este código tienes que modificarlo de la siguiente forma: cambia el signo ">" del final por "/>". 
Una vez que lo cambies, te quedará algo así:

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


Añadir el código en el blog

Ahora en la página de tu blog en blogger, en el panel de control, ve a la pestaña de Diseño->Editar HTML
Busca la etiqueta <head> y justo después pega el código que teníamos preparado.
image

Usar el nuevo tipo de letra en tu Blog

Puedes usar el nuevo tipo de letra en cualquiera de tus definiciones de tipo de letra CSS, por ejemplo, para cambiar el tipo de letra en los títulos de los Posts, entonces puedes usar este código CSS:

h3.post-title {font-family: 'CustomFontName', serif;}


En este código que podéis ver, se indica que se usará el tipo de letra SERIF en caso de que algo no vaya bien usando el nuevo tipo de letra. Se recomienda usar este tipo de letra de "seguridad" para evitar comportamientos imprevistos.
Tras editar el CSS con nuestro nuevo tipo de letra, añadir el código " ]]></b:skin> " en tu plantilla. Así:
image
De esta forma puedes modificar fácilmente las definiciones de los tipos de letra CSS en tu plantlla.

Cómo usar varios tipos de letra propios en la plantilla Blogger

Cuando usas varios tipos de letra propios, no necesitas entonces añadir varias veces los códigos CSS en el código, puedes añadir la lista de tipos de letra solo una vez.
Por ejemplo, si piensas añadir 3 tipos de letra nuevos,  Tangerine,InconsolataDroid Sans, lo puedes hacer de una vez añadiendo el código:

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


Tan solo debes separar los nombres de los tipos de letra con el símbolo  "|".
Una vez hecho eso, ya puedes añadir los códigos CSS en tu plantilla, algo asi:

h3.post-title {font-family: 'Tangerine', serif;}
#header h1 {font-family: 'Inconsolata', serif;}
.sidebar h2 {font-family: 'Droid Sans', serif;}


Configuración extra
Por defecto, Google API  proporciona la versión normal del tipo de letra, y si necesitas las versiones en negrita, cursiva o negrita y cursiva al mismo tiempo, necesitas añadir :b  , :i o :bi al nombre de la letra en el código.
Por ejemplo si necesitas añadir la versión negrita y cursiva al tipo de letra Tangerine, entonces debes usar el código:

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


Espero que os sirva, en otros capítulos, los otros métodos.

6 comentarios:

Aaron marquez CR dijo...

oye como cambio el tipo de letra a la letra dentro de los post

Nautilus dijo...

Hola,
Una vez añadidos como se indica arriba, cuando escribes, si editas el html, verás el código de la fuente, ahí lo puedes editar por la que quieras que hayas añadido.

Jhonnysan dijo...

Quisiera que me ayudaras mis fuentes en los títulos del blog asi como en el contenido de las entradas se han cambiado solas solo que no se como hacerlo me podrias ayudar ya que cuando lo hago no se como poner las fuentes en negritas.

Frases LOVG dijo...

por fin he comprendido, llevaba mucho tiempo intentándolo y graias a tu explicación lo he logrado... si alguien desea ayuda pueden contactarme

ideas aqui dijo...

buen blogg me ha ayudado bastante

Anónimo dijo...

O sea que solo yo podré ver mi blog correctamente?, el resto del mundo que no tiene esta tipografia instalada en su computador, no podrá ver mi blog correctamente?

Publicar un comentario

 
Powered by Blogger