Fuentes personalizadas con Google Fonts

Aunque a veces el mundo de las fuentes personalizadas parezca un poco como las arenas movedizas, que cuanto más te mueves más te hundes, en realidad hay procesos bastante sencillos a la hora de usar fuentes que no vienen en blogger por defecto. Este es el caso de las Google Fonts. 

Como la herramienta que vamos a usar es la que os he mencionado, primero tendremos que ir a la página Google Fonts, ahí ya, puedes recreate todo lo que quieras mirando fuentes e intentando decidir cuál te gusta más o cuál se adapta mejor a tu blog. 

Una vez tengamos en el punto de mira nuestra fuente, vamos a Plantilla>Editar HTML y buscamos </head> y justo encima pegamos lo siguiente: 

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

Sustituye lo que está en verde por el nombre de la fuente que has elegido; si el nombre de la fuente es sólo una palabra, pega sin más; sin embargo, si el nombre tiene dos o más palabras, sepáralas sólo con un +. Ejemplo: 
<link href=' http://fonts.googleapis.com/css?family=Time+News+Roman' rel='stylesheet' type='text/css'/>
Si quieres instalar más de una fuente, sólo tienes que separar con la barra del 1: 
<link href=' http://fonts.googleapis.com/css?family=Time+News+Roman|Raleway|Tulpen+One' rel='stylesheet' type='text/css'/>
Ahora sólo tienes que poner el nombre de tu nueva fuente donde quieres que se muestre. Por ejemplo, si quieres ponerla en el título, sólo tienes que buscar h3.post-title, h4 { y donde pone font-family, poner el nombre de tu nueva fuente.

8 comentarios:

  1. ¡Hola! Menos mal, ¡necesitaba un tutorial como este! Hace ya unas semanas que llevo pensando en cambiar la fuente del blog, así que creo que con este tutorial ya podré ponerme y hacerlo :).

    ¡Muchas gracias! Un abrazo.

    ResponderEliminar
  2. Yo tengo que mirar bien todas las fuentes porque me miré las fuentes muy por encima. Gracias por el tutorial.
    Un beso

    ResponderEliminar
  3. Aiiii muchas gracias me viene como anillo al dedo, hoy justo he estado buscando fuentes para el blog y no he encontrado nada ^^

    Un beso

    ResponderEliminar
  4. Perdona, ¿podrías aclarar el último parrafo "Ahora sólo tienes que poner el nombre de tu nueva fuente donde quieres que se muestre. Por ejemplo, si quieres ponerla en el título, sólo tienes que buscar h3.post-title, h4 { y donde pone font-family, poner el nombre de tu nueva fuente.
    "?

    Es que yo soy bastante torpe

    ResponderEliminar
    Respuestas
    1. Hola, por supuesto. Si quieres que por ejemplo, la fuente que has instalado aparezca en las letras del título de cada entrada, sólo tienes que buscar esa etiqueta (habrá una diferente para cada elemento del blog), y donde esté font-family, sólo tienes que poner el nombre de la fuente que has instalado. Ejemplo:

      h3.post-title, h4 {
      font-family: Time News Roman;

      Si no se encuentra font-family, siempre puedes ponerlo tú :)

      Eliminar
  5. Desde luego utilizar fuentes personalizadas es una forma muy buena de hacer el blog algo más tuyo ^^ ¡Gracias por el tutorial!

    HTR.

    ResponderEliminar
  6. ¿Podéis, si no es molestia, publicar un tutorial sobre cómo eliminar las columnas que aparecen en algunas plantillas?

    Gracias. :D

    P.D.: Creo que su nombre es "sidebar".

    ResponderEliminar
  7. ¡Holi! Sé que vengo muy tarde, pero es que no encuentro el código h3.post-title, h4 {, solo me viene h3.post-title, .coments h4 y el variable y el default pero nada de font-family, tampoco. :/

    ResponderEliminar

 

Facebook

Si tienes algún problema con tu plantilla, quieres recomendarnos algún tutorial o simplemente quieres estar al tanto de todas las novedades de HTML Para Torpes, puedes seguir nuestra página en Facebook.

Torpes

Seguir por e-mail

We use...

A veces el HTML y el CSS producen verdaderos dolores de cabeza. Aquí intentaremos solucionarlos de la forma más sencilla posible.

HTML para Torpes está formado por un grupo de blogueros interesados por el diseño web que colaboran de forma desinteresada, por lo que pedimos comprensión a la hora de evaluar el contenido y agradecemos cualquier sugerencia.

Siempre con la tecnología de: