{"section":"tutorials","requestedLocale":"es","requestedSlug":"personalizar-la-tipografia-de-tu-tienda","locale":"es","slug":"personalizar-la-tipografia-de-tu-tienda","path":"docs/es/tutorials/storefront/estilos/personalizar-la-tipografia-de-tu-tienda.md","branch":"main","content":"La tipografía de tu tienda online es una herramienta para comunicar la identidad de tu marca a los clientes.\nEl Admin ofrece la flexibilidad de personalizar la tipografía de tu tienda según las necesidades de tu negocio.\n\n> ⚠️ Recuerda que las modificaciones a la tipografía de la tienda realizadas en el **storefront** sustituyen a las modificaciones de tipografía realizadas en el código de la tienda. Asegúrate de comunicarte con tu equipo de desarrollo y verificar si las modificaciones se definirán en el storefront o en el código de la tienda.\n\n## Agregar familias de fuentes personalizadas\n\n1. En el Admin, accede a **Storefront > Estilos**.\n\n2. Selecciona el ícono de kebab (tres puntos).\n\n3. Haz clic en **Editar > Tipografía > Familia de fuentes**.\n\n4. Haz clic en **Agregar fuente personalizada**.\n\n5. En el campo **Familia de fuentes**, crea un nombre para la fuente.\n\n    ![familia-de-fontes-giff-es](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/storefront/estilos/personalizar-la-tipografia-de-tu-tienda_1.gif)\n\n6. Haz clic en **Enviar** para cargar el archivo de la fuente deseada.\n\n> ⚠️ El archivo de la familia de fuentes debe tener una de las siguientes extensiones: *.ttf* o *.woff*.\n\n7. Después de cargar los archivos, escoge un estilo para las fuentes. Los valores aceptados son: `Thin`, `Extra Light`, `Light`, `Regular`, `Medium`, `Bold`, `Extra Bold`, `Black`, `Thin Italic`, `Extra Light Italic`, `Light Italic`, `Regular Italic`, `Medium Italic`, `Bold Italic`, `Extra Bold Italic` y `Black Italic`.\n\n6. Haz clic en `Guardar`.\n\n## Configurar los tokens de tipo\n\nDespués de agregar nuevas familias de fuentes, puedes aplicarlas al contenido de texto de tu tienda utilizando **tokens de tipo**.\n\nLa opción **Tokens de tipo** muestra todo el contenido de texto personalizable de tu tienda. Consulta lo que puedes personalizar utilizando los tokens de tipo:\n\n- **Headings (Encabezados):**  son los primeros elementos que los usuarios leen y proporcionan información de forma más eficiente, sin usar más palabras de las necesarias. Hay seis encabezados. 'Heading 1' (Encabezado 1) es el estilo de encabezado más común y 'Heading 6' (Encabezado 6) es el menos común.\n\n- **Body (Cuerpo):** es el estilo de texto definido para que los párrafos sean legibles al aumentar el espacio entre las líneas. Solo hay un tipo de cuerpo.\n\n- **Auxiliary small/mini (Auxiliar pequeño/mini):** son elementos secundarios de una interfaz, como leyendas y textos de insignias. Hay dos tipos de auxiliares: pequeño y mini.\n\n- **Action (Acción):** es el estilo de texto utilizado en la acción principal de la página y en elementos interactivos, como llamadas a la acción (CTA), botones y pestañas. Hay tres tipos: `Action` (Acción), `Action Small` (Acción pequeña) y `Action Large` (Acción grande).\n\n- **Code (Código):** es el estilo de texto utilizado para indicar términos técnicos, como lenguajes de programación, cálculos de envío y reglas de cuotas.\n\nSigue las instrucciones a continuación para agregar nuevas familias de fuentes:\n\n1. En el Admin, accede a **Storefront > Estilos**.\n\n2. Selecciona el ícono de kebab (tres puntos).\n\n3. Haz clic en **Editar > Tipografía > Tokens de tipo**.\n\n    ![tokens-tipo-giff-es](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/storefront/estilos/personalizar-la-tipografia-de-tu-tienda_2.gif)\n\n4. Haz clic en el token que deseas personalizar como, por ejemplo, **Heading 1** (Encabezado 1).\n\n5. Personaliza cada propiedad según la tabla a continuación:\n\n    | Propiedad | Descripción | Valores disponibles |\n    | ----------- | --------------- | ----------------- |\n    | __Font Family__ | Define el tipo de fuente del token de tipo. | `JosefinSans`, `Bold`, `Default` |\n    | __Font Weight__ | Define el grosor de los caracteres del token de tipo que se mostrarán. | `Thin`, `Extra Light`, `Light`, `Normal`, `Medium`, `Semi Bold`, `Bold`, `Extra Bold`, `Black`.   |\n    | __Font Size__ | Define el tamaño de la fuente del token de tipo. | `48px`, `36px`, `24px`, `20px`, `16px`, `14px`, `12px`, |\n    | __Text Transform__ | Define el uso de letras mayúsculas del token de tipo. | `Initial`, `None`, `Capitalize`, `Uppercase`, `Lowercase`, |\n    | __Letter Spacing__ | Define el espacio entre los caracteres del token de tipo. | `Normal`, `Tracked`, `Tracked Tight`, `Tracked Mega`, `Zero` |\n\n6. Haz clic en `Guardar`."}