Cómo usar fuentes personalizadas en tu blog

Cómo cambiar la fuente de las entradas en blogger.

En este tutorial vamos a aprender cómo podemos cambiar la tipografía de los titulos de las entradas de blogger para personalizar nuestro blog y que queden más bonitos.

En Google Fonts disponen de un montón de fuentes que puedes utilizar gratis para tu blog, (también las puedes descargar si quieres utilizarlas en programas de edición gráficos).

Lo primero es entrar a la página de google fonts y elegir una tipografía que te guste, entonces haces click sobre el botón de color azul de la derecha que dice Add to collection, al hacer esto en la parte inferior de la página te mostrará el nombre de la  fuente añadida a tu colección (parte izquierda inferior) y en el lado derecho tendrás tres botones como los de la imagen siguiente:

Fíjate que viene marcada por defecto la opción Choose pero tenemos que elegir la opción Use.
La siguiente pantalla te dará una serie de pasos, tienes que ir al paso 3 donde hay un código como el de la imagen siguiente.

  • Antes de copiar el código abre el panel de edición de blogger y ve a Plantilla, después pincha en editar html y busca la etiqueta <head> que está casi al principio del código html. 
  • Cuando encuentres la etiqueta copia y pega justo debajo de ella la línea de código nueva, pero antes de darle a guardar tienes que poner al final de esta nueva linea que has pegado una barra / para cerrar la etiqueta,  justo después de la palabra css’ (ver foto abajo). 
  • Guardamos la plantilla.

En el panel de google fonts (paso 4)  nos queda otra linea de código que tenemos que usar pero no la copies todavía  (ver foto):

Esta línea de código la tenemos que integrar en nuestro css, para ello vamos de nuevo en el menú de la izquierda a Plantilla, después le damos al botón Personalizar, Avanzado, Añadir CSS, y en el recuadro de la derecha tienes que pegar el siguiente código:


h3.post-title {
  font-family: ‘Amatic SC’;
}

Este código de arriba sirve para cambiar y personalizar sólo el título de tu post

Si lo que quieres es usar un tipo de letra para todo el blog el código que tienes que poner en el css es el siguiente:

body {
  font-family: ‘Amatic SC’;
}

Para cambiar el tipo de letra de la cabecera hay que usar el siguiente:

.header h1 {
  font-family: ‘Amatic SC’;
}

Para cambiar el tipo de letra del cuerpo de las entradas hay que usar el siguiente:

.post-body {
  font-family: ‘Amatic SC’;
}

(El código es lo que va en rojo, lo que va en color negro es el nombre de la tipografía.)

Ahora  lo siguiente es sustituir donde pone font-family… por el código que te da en el paso 4 google fonts y que contiene el nombre y los datos de la fuente que tu has seleccionado.

Si todo ha ido bien ya puedes previsualizar tu blog y tendrás tu fuente funcionando. Guarda los cambios haciendo click en el botón de aplicar al blog.

¿Que tal, ha funcionado? Si tienes alguna duda no dudes en preguntar, intentaremos resolverlas.


Los más vistos

Lo lamentamos. No hay nada que mostrar aún.

78 Respuestas

  1. Mekyta 11 años ago
  2. Juani Lopez Berrio 11 años ago
    • Trini Mora 10 años ago
  3. Julieta Casuscelli 10 años ago
  4. cova s 10 años ago
    • euroresidentes 10 años ago
  5. B Glamy 10 años ago
    • trinimora 10 años ago
    • Maricruz Gutiérrez 9 años ago
  6. Adriana Suels 10 años ago
  7. Laia Cris 10 años ago
    • trinimora 10 años ago
  8. Lady Blue 10 años ago
    • trinimora 10 años ago
  9. Lauraah Alboraan 10 años ago
  10. Paulita Heathcliff 10 años ago
    • trinimora 10 años ago
  11. Paulita Heathcliff 10 años ago
    • trinimora 10 años ago
    • Paulita Heathcliff 10 años ago
    • trinimora 10 años ago
  12. Paulita Heathcliff 10 años ago
  13. Rosa Ayuso 10 años ago
  14. Rosa Ayuso 10 años ago
    • trinimora 10 años ago
    • Rosa Ayuso 10 años ago
    • trinimora 10 años ago
  15. Miranda D. López 10 años ago
    • trinimora 10 años ago
    • Miranda D. López 10 años ago
  16. david santillan 10 años ago
  17. trinimora 10 años ago
  18. Dalia 10 años ago
  19. Zaira García 10 años ago
  20. ScrapCatDreams 9 años ago
  21. Iván Segurado 9 años ago
    • trinimora 9 años ago
  22. Iván Segurado 9 años ago
  23. Azahar Taller 9 años ago
  24. Luis Sadra 9 años ago
  25. Unknown 9 años ago
  26. Lluna 9 años ago
  27. Hellen Palomino Ramos 9 años ago
    • Rock Violet 8 años ago
  28. Yaz 9 años ago
  29. Michelle S. 9 años ago
  30. Chuliot 9 años ago
  31. Yaz 9 años ago
  32. Ra Mindbroken 9 años ago
    • trinimora 9 años ago
  33. Dario Rodriguez 9 años ago
  34. Maribel Cota 9 años ago
  35. Juan Pablo 9 años ago
  36. Anónimo 8 años ago
  37. Aida Martí 8 años ago
  38. Mauro Gomez 8 años ago
  39. JNiño 8 años ago
  40. MaJo 8 años ago
  41. Orange Souls 8 años ago
  42. Axun 8 años ago
  43. Mary María 8 años ago
  44. norma 8 años ago
  45. José 7 años ago
  46. Joan Diego 7 años ago
  47. Clara 7 años ago
  48. Clara 7 años ago
  49. Guadalupe Vázquez 6 años ago
  50. Guadalupe Vázquez 6 años ago

Añadir Comentario