Ir a contenido principal
Nota: Este contenido se tradujo a través de un software y es posible que no haya sido revisado. La versión en inglés se considera, por tanto, la versión oficial y es posible que haya sido actualizada. Para acceder a la versión en inglés, haz clic aquí.
Landing Pages

Usar fuentes en HubSpot

Última actualización: octubre 15, 2021

Requisitos

Todos los productos y planes

Las fuentes disponibles para el contenido en HubSpot dependen del tipo de contenido y del tipo de fuente. Ciertas fuentes predeterminadas están disponibles en todos los editores de contenido, mientras que Google Fonts y las fuentes personalizadas tienen restricciones adicionales, que se detallan a continuación: 

Tipo de contenido Tipo de fuente  
  Fuentes predeterminadas Google Fonts

Fuentes personalizadas

 
Página - plantillas de inicio Disponible en la pestaña Diseño del editor de contenido No disponible  
Página - plantillas de temas Disponible en configuración de tema y a través de la hoja de estilo Disponible a través de la hoja de estilo  
Página - plantilla codificada Disponible a través de la hoja de estilo o el módulo personalizado Disponible a través de la hoja de estilo  
Blog Disponible a través de la hoja de estilo o el módulo personalizado Disponible a través de la hoja de estilo  
Correo electrónico Algunas fuentes predeterminadas no están disponibles en el editor de correo electrónico drag and drop Disponible solo para plantillas de correo electrónico codificadas y personalizadas; no se admite en la mayoría de los clientes de correo electrónico Disponible solo para plantillas de correo electrónico codificadas y personalizadas; no se admite en la mayoría de los clientes de correo electrónico  
Base de conocimientos Disponible en la pestaña Diseño del editor de plantillas No disponible  
Módulo personalizado Disponible para módulos personalizados que no se utilizan en los correos electrónicos Disponible para módulos personalizados que no se utilizan en los correos electrónicos  
CTA  

Usar fuentes predeterminadas

Las fuentes predeterminadas se pueden usar en todos los tipos de contenido y están diseñadas para cargarse en la mayoría de las plataformas y dispositivos. 

  • Navega a tu contenido:

    • Páginas del sitio web: En tu cuenta de HubSpot, dirígete a Marketing > Sitio web > Páginas web.
    • Páginas de destino: En tu cuenta de HubSpot, ve a Marketing > Páginas de destino.
    • Blog: En tu cuenta de HubSpot, dirígete a Marketing > Sitio web > Blog.
    • Base de conocimientos: En tu cuenta de HubSpot, dirígete a Servicio > Base de Conocimiento.
    • Correo electrónico: En tu cuenta de HubSpot, dirígete a Marketing > Correo.
  • Coloca el cursor sobre tu contenido y haz clic en Editar
  • En el editor de contenido, haz clic en un módulo de texto enriquecido y, luego, resalta el texto que deseas editar. 
  • En la barra de herramientas de texto enriquecido, haz clic en el menú desplegable Fuente y selecciona una fuente. Las siguientes fuentes están disponibles en módulos de texto enriquecido: 
    • Andale Mono*

    • Arial

    • Book Antiqua*

    • Courier New

    • Georgia

    • Helvética

    • Impact*

    • Lato**
    • Merriweather**
    • Mónaco**
    • Symbol*

    • Tahoma

    • Terminal*

    • Times New Roman

    • Trebuchet MS

    • Verdana

*No está disponible en el editor de correo electrónico drag and drop  

**Solo disponible como fuente web en el editor de correo electrónico drag and drop.

Usar fuentes de Google

Google Fonts está disponible en el editor de contenido para páginas que utilizan plantillas y temas de inicio, así como artículos de la base de conocimientos y módulos personalizados. Para usar una fuente de Google en otras páginas, deberás copiar el código de importación de la fuente, pegarlo en la hoja de estilo de la página y luego aplicar la fuente con reglas CSS.

Más información sobre cómo los desarrolladores pueden usar los campos de fuente para agregar Google Fonts a temas y módulos personalizados en la documentación para desarrolladores de HubSpot. 

Nota: Las fuentes de Google Fonts no se pueden seleccionar en el menú desplegable de fuentes del editor de texto enriquecido. 

  • Navega a fonts.google.com.
  • En la barra de búsqueda, ingresa un nombre de fuente
  • Haz clic en el nombre de la fuente para ver una lista de estilos disponibles para importar.
  • Haz clic en + Seleccionar este estilo junto a cada estilo que deseas importar desde esta fuente.
  • En el panel derecho, selecciona @import en la sección Usar en la web
  • Copiar el código de la fuente: 
    • En la sección Uso en la web, copia el código @import sin la etiqueta <style>.
    • En el campo Reglas CSS para especificar familias, copia el código para establecer reglas CSS. 

copy-google-font

Una vez que tengas el código de Google Fonts, puedes agregar la fuente a tu contenido de HubSpot: 

Usar una fuente de Google Fonts en una hoja de estilo

  • Copiar el código @import de la fuente de Google Fonts.
  • En tu cuenta de HubSpot, dirígete a Marketing > Archivos y plantillas > Herramientas de diseño.
  • En el buscador, abre la hoja de estilo utilizada para tu contenido.
  • Pega el código @import en la línea 1 de la hoja de estilo. 
  • Agrega el código para establecer reglas CSS a los selectores apropiados en la hoja de estilo. 
add-google-fonts-imported-font-to-stylesheet
  • Haz clic en Publicar o en Actualizar para activar tus cambios. 

Usar una fuente de Google Fonts en una plantilla de correo electrónico codificada personalizada

Aunque las fuentes de Google Fonts son compatibles con Apple Mail y algunos otros clientes de correo electrónico, el soporte amplio es limitado y los clientes de correo electrónico más populares solo admiten fuentes web predeterminadas. Obtén más información sobre cómo seleccionar las fuentes predeterminadas utilizadas en el editor de correo electrónico clásico actualizado.  
 
Para agregar una fuente de Google Fonts a una plantilla de correo electrónico codificada personalizada: 
  • Copia el código @import de la fuente de Google Fonts.
  • En tu cuenta de HubSpot, dirígete a Marketing > Archivos y plantillas > Herramientas de diseño.
  • En el buscador, abre la plantilla de correo electrónico codificado personalizado.
  • En la<head> sección de la plantilla, pega el código @import entre las etiquetas<style>....</style>
  • En el código del cuerpo del correo electrónico, agrega la fuente personalizada en el estilo en línea
  • En la parte superior derecha, haz clic en Actualizar o Publicar para activar tus cambios. 

Usar una fuente de Google Fonts en una CTA

  • Copia el código de Google para establecer reglas CSS para esa fuente.
  • En tu cuenta de HubSpot, dirígete a Marketing > Captación de oportunidades de venta > CTAs.
  • Coloca el cursor sobre una campaña y haz clic en el menú desplegable Acciones y selecciona Editar.
  • En el panel derecho, haz clic en Opciones avanzadas.
  • En el cuadro de texto, pega el código de Google para establecer reglas CSS para esa fuente. 
  • En la parte inferior derecha, haz clic en Siguiente. Luego haz clic en Guardar.

Usar una fuente de Google Fonts en un módulo personalizado

Nota: Google Fonts no está disponible para módulos personalizados utilizados en plantillas de correo electrónico.


  • En tu cuenta de HubSpot, dirígete a Marketing > Archivos y plantillas > Herramientas de diseño.

click-add-field

  • En la parte superior derecha, haz clic en Publicar cambios para activar los cambios.
  • Navega a tu contenido:

    • Páginas del sitio web: En tu cuenta de HubSpot, dirígete a Marketing > Sitio web > Páginas web.
    • Páginas de destino: En tu cuenta de HubSpot, ve a Marketing > Páginas de destino.
    • Blog: En tu cuenta de HubSpot, dirígete a Marketing > Sitio web > Blog.
  • Coloca el cursor sobre el contenido con el módulo personalizado y haz clic en Editar
  • En el editor de contenido, haz clic en el módulo personalizado.  
  • En el editor de la barra lateral, haz clic en el menú desplegable Campo de fuente y selecciona una fuente de Google

Usar objetos personalizados

Como alternativa a usar fuentes web estándar o usar una biblioteca de fuentes como Google Fonts, puedes alojar archivos de fuentes en tu herramienta de archivos y hacer referencia a ellos en tu hoja de estilo. 

Nota: las fuentes personalizadas deben aplicarse a través de CSS. Agregar una fuente personalizada no agregará la fuente a los menús desplegables de estilo en el editor de contenido. 

Para usar una fuente en el contenido, carga los archivos de la fuente a la herramienta de archivos. HubSpot recomienda cargar un mínimo de versiones .woff, .ttf, y .eot de la fuente para garantizar que la fuente se cargue en todos los navegadores

s Puedes usar el modo Experto en la herramienta de conversión de Font Squirrel para generar formatos de archivo adicionales.

  • En tu cuenta de HubSpot, dirígete a Marketing > Archivos y plantillas > Archivos.
  • Haz clic en Cargar archivos
  • En el disco duro de la computadora, selecciona los archivos de fuente y luego haz clic en Abrir
  • Haz clic en el nombre de un archivo de fuente cargado. 
  • En el panel derecho, haz clic en Copiar URL para copiar la URL donde se aloja el archivo. Necesitarás la URL para la fuente en cada formato de archivo. 

Usar una fuente personalizada en una hoja de estilo

Una vez que hayas agregado una fuente personalizada a la herramienta archivos, puedes hacer referencia a ella en una hoja de estilo. Cada estilo de fuente (cursiva, negrita, etc.) requerirá una regla @font-face separada. Más información sobre cómo trabajar con hojas de estilo en HubSpot

  • En tu cuenta de HubSpot, dirígete a Marketing > Archivos y plantillas > Herramientas de diseño.
  • En el buscador, abre la hoja de estilo utilizada para tu contenido.
  • Para cada estilo de fuente: 
    • En la parte superior de la hoja de estilo, pega el siguiente código:  
@font-face { font-family: "Tu nombre de fuente";  src: url('your_font_file.eot?') format('eot'), url('your_font_file.woff') format('woff'), url('your_font_file.ttf') format('truetype');}
    • Reemplaza Tu nombre de fuente por el nombre de tu fuente personalizada.
    • Reemplaza your_font_file.xxx? por la URL de la herramienta de archivos. Repite para cada formato de archivo. 
  • Crea reglas CSS con la propiedad font-family para aplicar la fuente personalizada. 
  • En la parte superior derecha, haz clic en Actualizar o Publicar para activar tus cambios. 

sample-custom-font-in-stylesheet

Usar una fuente personalizada en una plantilla de correo electrónico codificada personalizada

La mayoría de los clientes de correo electrónico populares no admiten fuentes personalizadas. Para garantizar una experiencia consistente para tus lectores, se recomienda usar fuentes web predeterminadas en los correos electrónicos. Sin embargo, si quieres agregar una fuente personalizada a una plantilla de correo electrónico codificada personalizada, puedes hacerlo una vez que hayas agregado la fuente personalizada a la herramienta de archivos.

  • En tu cuenta de HubSpot, dirígete a Marketing > Archivos y plantillas > Herramientas de diseño.
  • En el buscador, abre la plantilla de correo electrónico codificado personalizado.
  • Para cada estilo de fuente:
    • En la <head> sección de la plantilla, pega este código entre las etiquetas <style>....</style>: 
@font-face { font-family: 'Tu nombre de fuente';  src: url('your_font_file.eot?') format('eot'), url('your_font_file.woff') format('woff'), url('your_font_file.ttf') format('truetype');}
    • Reemplaza Tu nombre de fuente por el nombre de tu fuente personalizada.
    • Reemplaza your_font_file.xxx? por la URL de la herramienta de archivos. Repite para cada formato de archivo. 
  • En el código del cuerpo del correo electrónico, agrega la fuente personalizada en el estilo en línea
  • En la parte superior derecha, haz clic en Actualizar o Publicar para activar tus cambios. 

Usar una fuente personalizada en un CTA

Una vez que hayas agregado una fuente personalizada a la herramienta archivos, puedes usarla en las CTA: 

  • En tu cuenta de HubSpot, dirígete a Marketing > Captación de oportunidades de venta > CTAs.
  • Coloca el cursor sobre una campaña y haz clic en el menú desplegable Acciones y selecciona Editar.
  • En el panel derecho, haz clic en Opciones avanzadas.
  • En el cuadro de texto, pega este código: 

font-family: 'Tu nombre de fuente';

  • Reemplaza Tu nombre de fuente por el nombre de la fuente
  • En la parte inferior derecha, haz clic en Siguiente. Luego haz clic en Guardar

set-custom-font-for-cta

Usar una fuente personalizada en un módulo personalizado

Una vez que hayas agregado una fuente personalizada a la herramienta archivos, puedes usarla en módulos personalizados: 

  • En tu cuenta de HubSpot, dirígete a Marketing > Archivos y plantillas > Herramientas de diseño.
  • En el buscador, abre el módulo personalizado.
  • En la sección module.css, pega el siguiente código: 
@font-face { font-family: "Tu nombre de fuente";  src: url('your_font_file.eot?') format('eot'), url('your_font_file.woff') format('woff'), url('your_font_file.ttf') format('truetype');}
  • Reemplaza Tu nombre de fuente por el nombre de tu fuente personalizada.
  • Reemplaza your_font_file.xxx? por la URL de la herramienta de archivos. Repite para cada formato de archivo.
  • Crea reglas CSS con la propiedad font-family para aplicar la fuente personalizada. 

custom-module-custom-font

  • En la parte superior derecha, haz clic en Publicar cambios para activar los cambios.