Revista Comunicación

Agregar nuevos estilos de letra o fuentes en Blogger

Publicado el 29 mayo 2014 por Loquendo Manzano

como poner nuevas fuentes en blogger

Las fuentes que podemos agregar a nuestro blog le darán un toque de estética de mas calidad, ya que las fuentes preterminadas que usan como la arial, verdana, suelen ser casuales y poco atractivas, un  buen estilo de fuente o letra de tu blog podría encantar a tus lectores, dándole un mejor estilo a tu blog, aquí te mostrare la mejor manera de agregar fuentes nuevas a blogger, también se puede realizar en otras plataformas como wordpress, joomla u otros, si conocen bien a google fonts se darán cuenta de que tiene muchas formas de fuentes o tipos de letras, pero ademas de enseñarte como colocar estas fuentes te enseñare a optimizarlas para que no le quiten velocidad a tu blog.
Bien lo primero que tienes que hacer es buscar una fuente que te guste o te parezca atractiva, ingresemos a google fonts y busca una fuente que te parezca llamativa, aquí te dejare unos ejemplos de fuentes que son muy elegantes:

Nombre de la fuente Estilo visual

Oswald abcdefghijklmnñopqrstuvwxyz

Open sans abcdefghijklmnñopqrstuvwxyz

Roboto abcdefghijklmnñopqrstuvwxyz

Raleway abcdefghijklmnñopqrstuvwxyz

PT Sans Narrow abcdefghijklmnñopqrstuvwxyz


si te gusto una de esas solo busca su nombre en google fonts

Como agregar una fuente nueva en blogger


  1. Bien ya que tengas tu fuente vamos a colocarla en nuestro blog o pagina web, selecciona el botón azul que dice "add to collection" 
  2. Cuando elijas la fuente, un recuadro abajo saltara y hay busca la opcion USE o usar
  3. Una ves echo esto te mostrara los estilos de la misma fuentes como lo son por ejemplo: Light, Normal, Semi-Bold, Bold, Extra-Bold , estas hacen que las letras sean mas gruesas o mas delgadas, o también cursivas, elige la opción que quieras. si eliges mas de una podrás ver un cargador al lado que te mostrara cuanto tardara en cargar la fuente.
  4. una ves echo esto mas abajo veras la opción para copiar el código para implementar la nueva fuente a tu pagina, puedes escoger 3 opciones, eligire la opción Standard 

fuentes blogger agregar
Ahora el paso clave, si eliges una de las opciones y la colocas normal en la plantilla de blogger lo que pasara es que al cargar la fuente tardara mas la carga del blog, entonces que podemos hacer, bien es simple copiaremos el código desde la fuente para aligerar la carga de esta. te mostrare lo que intento decir, si copiamos el código normal y lo pegamos en nuestra plantilla de blogger o pagina, esto ara que la carga del blog sea mas lenta por ello tomaremos la fuente del origen para acelerar la carga, mira los ejemplos

Velocidad del blog con la fuente sin cambios Agregar nuevos estilos de letra o fuentes en Blogger

Velocidad del blog con la fuente y con el cambio Agregar nuevos estilos de letra o fuentes en Blogger


Para realizar el truco solo ve a la dirección que esta dentro del link de la opción Standart o el de la imagen de arriba que es así:
http://fonts.googleapis.com/css?family=Open+Sans

y en esa pagina veras un código como este
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

  • ese código lo copias
  • dirígete a plantilla
  • editar HTML
  • y pega el código antes de ]]></b:skin> y listo guardas

Como usar la nueva fuente en blogger


Es fácil cuando quieras establecer el uso de la nueva fuente que colocamos en el blog, solo debemos agregar este código en la css
font-family: 'Open Sans', sans-serif;

ejemplo para usarlo en los títulos principales
h1{
margin:0 0 1em 0;
font-size:32px;
font-family: 'Open Sans', sans-serif;
}

como podemos ver aplicando el truco nos ahorramos la velocidad de nuestro blog, al carga los estilos de letra, y bien eso es todo.

Volver a la Portada de Logo Paperblog

Dossier Paperblog

Revista