Bienvenido a VidaBlogger, un sitio dedicado a brindar Ayuda para Blogs.

Vas a poder encontrar trucos blogger, tutoriales y herramientas para blogs, aprenderás estrategias sobre SEO y posicionamiento web, y te daremos los mejores consejos para que lleves tu blog al máximo potencial!





1 dic. 2015

Google Fonts: fuentes para tu blog

Google Fonts

Google no deja de avanzar cada día un poco más, y ahora nos ofrece una interesante aplicación para nuestros blogs, que es la de añadir fuentes especiales a parte de nuestro texto, con lo cual lograr efectos distintivos.

Al añadir textos con fuentes distintas a las tradicionales (arial, helvética, etcétera) podemos lograr resaltar ciertas frases o comentarios, quedándonos la seguridad de que nuestros visitantes podrán ver correctamente en sus navegadores, pese a no tener instalados ese tipo de fuente.

Antes este efecto tenía que ser recreado bajo animaciones en flash o con imágenes, pero ahora es mucho más sencillo que eso, si somos organizados claro.

Para poder aprovechar el beneficio de Google Font Library debemos seguir los siguientes pasos:
  1. Acceder al directorio de fuentes y escoger la que nos gusta.
  2. Luego escoger el tamaño de la fuente que nos interesa.
  3. Ir a la pestaña Get the Code (obtener el código).
  4. Accedemos a la edición de html, en el escritorio > diseño.
  5. Antes de la etiqueta </head> debemos pegar el código:
<link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>


  1. Luego en el código CSS de tu plantilla o theme busca el elemento en que quieres que aparezca este tipo de fuente e inserta la tipografía seleccionada, como primera alternativa, de forma tal que quede algo similar a: h1 { font-family: 'Tangerine', arial, serif; }
  2. Listo, cada vez que utilices ese elemento, en nuestro caso el h1, aparecerá esta nueva tipografía.
Es un truco interesante ya que podemos dar notoriedad al blog de forma sencilla, aunque esto nos puede conducir a nuevos cambios en el diseño del blog.



Si te ha gustado este post, no dudes en suscribirte al feed RSS de VidaBlogger - Ayuda para Blogs! para recibir todos los días la últimas novedades - (¿Que es RSS?)

3 comentarios :

  1. Buenas que tal ?

    Estaba intentando probar este tip, que veo de mucha utilidad para darle un toque de diseño a nuestros blogs, pero me he encontrado con el siguiente problema:

    Primero no me deja guardar el codigo y me da este error The element type "link" must be terminated by the matching end-tag ""



    Y depues no encuentro el h1 { font-family: Lobster, arial, serif; }


    De hecho las tipografias solo aparecen en las variables de grupos








    No se si esto se debe a que mi blog esta desarrollado con el diseñador de plantillas de blogger.

    Si puedes echarme una mano te lo agradecere enormemente

    ResponderEliminar
  2. ami me salia igual, pero lobre que funcionara, el primer codigo que debes poner antes de head, le falta una diagonal antes del signo "mayor que" osea este > y te tendria que quedar asi: ....text/css'/> te puse solo la parte final poruqe no puedo poner codigos completos aquie en los comentarios, peor es obvio que sabes que es la ultima parte del codigo solo le falta la diagonal

    ResponderEliminar
  3. intente todo pero cuando pongo vista previa me pone
    No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: The reference to entity "subset" must end with the ';' delimiter.

    ResponderEliminar

Lea las reglas:

Todos los comentarios serán leídos y moderados previamente.

Serán publicados aquellos comentarios que respeten las siguientes reglas:
- Su comentario debe estar relacionado al contenido del post.
- No se aceptan comentarios tipo SPAM.
- No incluya links No necesarios en el contenido de su comentario.
- Si quieres dejar la url de tu blog, hazlo utilizando la opción OpenID.
- La caja de comentarios no es el lugar para pedir intercambio de links (para ello ve a la página de contacto).
- Ofensan personales, amenazas o insultos NO serán permitidos.

OBS: Los comentarios de los lectores no reflejan las opiniones del blog.