Centro de Atención Nube Configura tu tienda Diseño Personalizar tu diseño Tipo de letra

¿Cómo cambiar los tipos de letra de mi diseño?

Pasos para elegir la tipografía de algunos de los elementos de tu Tiendanube

Última actualización: 22/07/2024

Cambiar la fuente de algunos de los textos de tu Tiendanube te ayuda a darle una imagen más personalizada y acorde a la identidad visual de tu marca.

En este tutorial, te contamos los pasos a seguir para elegir qué tipo de letra se va a aplicar a distintos elementos de tu tienda, entre diferentes fuentes predeterminadas en tu administrador.

Delete

Success

Te recomendamos elegir uno o dos tipos de letra para tu tienda, de manera que quede consistente con el diseño y el logo.

Pasos para configurar fuentes predeterminadas

1. Ingresar a "Mi Tiendanube > Diseño" dentro del administrador de tu tienda.

2. Hacer clic en "Editar diseño".

3. En la barra lateral izquierda, ir a la sección "Tipo de letra".

Barra lateral de Personalizar el diseño actual, con la opción "Tipo de letra" resaltada

4. Elegir la tipografía deseada para cada sección de la tienda, desde el menú desplegable. Al hacer clic sobre una fuente, vas a ver un párrafo de ejemplo, para que puedas saber cómo quedaría en tu tienda. 

GIF mostrando que al elegir un tipo de letra, se muestra un párrafo de ejemplo para previsualizarlo

Los elementos o secciones para los que se puede elegir el tipo de letra, dependen de la plantilla de diseño de tu tienda:

Atlántico, Amazonas, Bahía, Idea, Cubo, Río, Lima, Cali, Toluca, Morelia, Baires, Brasilia y Recife

En estos diseños, es posible modificar el tipo de letra de:

  • Títulos de las páginas y banners.
  • Texto en el resto del sitio.
Delete

Uyuni

En el diseño Uyuni es posible modificar el tipo de letra de:

  • Títulos de las páginas y banners (puedes elegir colocarlos en negrita).
  • Texto en el resto del sitio.
Delete

Simple

En el diseño Simple, es posible modificar el tipo de letra de:

  • Títulos de las páginas y banners.
  • Texto de los menús.
  • Títulos de los productos en la grilla.
  • Texto de los botones.
  • Texto del logo y el resto del sitio.
Delete

Trend y Focus

En los diseños Trend y Focus, es posible modificar el tipo de letra de:

  • Texto del logo, títulos de las páginas, banners y textos principales del sitio.
  • Texto en el resto del sitio.
Delete

Material

En el diseño Material, es posible modificar el tipo de letra de:

  • Texto del logo.
  • Títulos de las páginas y banners.
  • Texto en el resto del sitio.
Delete

Lifestyle

En el diseño Lifestyle, es posible modificar el tipo de letra de:

  • Texto del logo.
  • Títulos de las páginas y banners.
  • Títulos de los productos en la grilla.
  • Texto de menús, oferta, compra rápida e icono del carrito.
  • Texto de los botones.
  • Texto en el resto del sitio.
Delete

Silent

En el diseño Silent, es posible modificar el tipo de letra de:

  • Texto del logo.
  • Títulos de las páginas.
  • Títulos de los productos en la grilla y banners.
  • Texto de menús, oferta, compra rápida e icono del carrito.
  • Texto de los botones.
  • Texto en el resto del sitio.
Delete

5. Una vez que elijas la tipografía para cada sección, hacer clic en el botón "Publicar cambios".

¡Listo! 🙌

Ya vas a haber cambiado el tipo de letra para diferentes elementos en tu tienda.


Preguntas frecuentes sobre cambios en el tipo de letra

¿Por qué no aplicó el tipo de letra en mis páginas de contenido?

En caso de que veas una tipografía distinta en tus páginas de contenido, puede ser por haber pegado texto que ya tenía formato. Lo que suele pasar es que el texto se pega con el formato original, y puede quedar inconsistente con el resto de la tienda.


Por eso, si estás pegando un texto de otro lado (es esencial que nunca sea copiado un texto que no sea propio), puedes utilizar el botón de "Eliminar formato" dentro del editor de textos de la página. 

Editor de página, mostrando resaltado el botón para eliminar el formato

Delete

¿Puedo usar tipos de letra que no estén en el Administrador de mi tienda?

Para usar una fuente diferente a las predeterminadas en el Administrador, es necesario hacerlo a través de códigos CSS. Para eso, es necesario tener conocimientos básicos de ese lenguaje.

En estos casos, podrías agregar otras tipografías usando una fuente de Google Fonts:


1. Ir a 🌐 Google fonts y elegir la o las tipografías que quieras para tu tienda.


2. Una vez selecciones la tipografía, hacer clic en el botón "Select style" (seleccionar estilo) que está al lado.
Tipo de letra en Google Fonts, con el botón Select this style resaltado


3. En la barra lateral, con la opción "link" seleccionada, seleccionar la parte del código que es un link (que está entre comillas e incluye el nombre de la tipografía) y copiarla.
Link seleccionado dentro de código generado
4. En otra pestaña del navegador, pegar e ingresar al link que copiaste en el paso anterior.

5. Copiar todo el código que aparece en la página a la que ingresaste.

Página abierta con el link copiado anteriormente. Código resaltado


6. Pegar ese código en la sección "Mi Tiendanube > Diseño > Personalizar el diseño actual", en el campo dentro de la opción "Edición avanzada de CSS".
Código pegado en el campo de CSS del Administrador de Tiendanube


7. Hacer clic en "Probar CSS" y, luego, en "Publicar cambios".

De esa forma, vas a haber agregado esa nueva fuente para utilizarlo.

Delete

Warning

Al agregar esa nueva fuente, no la vas a ver en la sección Tipo de letra. Para usarla, es necesario generar los códigos CSS para los elementos donde quieras que aplique y agregarlos siguiendo el tutorial 👉 ¿Cómo insertar un código CSS en mi Tiendanube?

En caso de que no tengas conocimientos de CSS para armar los códigos, puedes trabajar con uno de los 👉 Tiendanube Especialistas.

¿Cómo puedo cambiar el tamaño de la letra de mi tienda?

Para cambiar el tamaño de la fuente, es necesario generar un código CSS y aplicarlo en el Administrador de tu tienda, desde la sección de personalización de tu plantilla de diseño. Para eso, es necesario tener conocimiento de CSS.


Puedes ver los pasos para insertar el código en:

📝 ¿Cómo insertar un código CSS en mi Tiendanube?

Delete

Info

En caso de que no tengas conocimientos de CSS, puedes trabajar con uno de los 👉 Tiendanube Especialistas.

Delete