8 may. 2014

Como usar una fuente de Google fonts en blogger

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 abcde fghijklm nñopqrs tuvwxyz
Open sans abcde fghijklm nñopqrs tuvwxyz
Roboto abcde fghijklm nñopqrs tuvwxyz
Raleway abcde fghijklm nñopqrs tuvwxyz
PT Sans Narrow abcde fghijklm nñopqrs tuvwxyz


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
Velocidad del blog con la fuente y con el cambio


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.


No hay comentarios.:

Publicar un comentario

2016 © Inovablog