Usar fuentes en HubSpot

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 fuentes (como Google Fonts) y fuentes personalizadas tienen restricciones adicionales, que se detallan a continuación: 

Nota: no todos los tipos de contenido están disponibles en todas las cuentas. Los tipos de contenido disponibles para las suscripciones de tu cuenta de HubSpot se encuentran en el Catálogo de productos y servicios. 

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. 

• Ve al contenido en el que quieres añadir el enlace:

  • Páginas de sitio web: En tu cuenta de HubSpot, dirígete a Contenido > Páginas web.
  • Páginas de destino: En tu cuenta de HubSpot, dirígete a Contenido > Landing pages.
  • Artículos de blog: En tu cuenta de HubSpot, dirígete a Contenido > Blog.
  • Base de conocimientos: En tu cuenta de HubSpot, dirígete a Contenido > Base de conocimientos.
  • Correo electrónico: En tu cuenta de HubSpot, dirígete a Marketing > Correos de marketing.
• Haz clic en el nombre de tu contenido. 
• 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.

Utilizar fuentes web

Las fuentes web están disponibles 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.

Si eres desarrollador, también puedes utilizar el campo de fuentes para agregar fuentes web a temas y módulos personalizados. Cuando se utilizan de estas formas, las fuentes web no se cargan desde un servicio de terceros; en su lugar, HubSpot las cargará directamente en el dominio del contenido.

Nota: las fuentes web no se pueden seleccionar en el menú desplegable de fuentes del editor de texto enriquecido. 

También puedes usar servicios de terceros, como Google Fonts, copiando el código de importación de la fuente, pegándolo en la hoja de estilos de contenido y aplicando la fuente mediante CSS:

• 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. 

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
• Usar una fuente de Google Fonts en una plantilla de correo electrónico codificada personalizada
• Usar una fuente de Google Fonts en una CTA (heredada)
• Usar una fuente de Google Fonts en un formulario
• Usar una fuente de Google Fonts en un módulo personalizado

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 Contenido > Administrador 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.
• En la parte superior derecha, haz clic en Publicar cambios para activar los cambios.  

Usar una fuente de Google Fonts en 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 Contenido > Administrador de diseño.
• En el buscador, abre la plantilla de correo electrónico codificado personalizado.
• En la sección <head> 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 Publicar cambios para activar los cambios. 

Usar una fuente de Google Fonts en una CTA (heredada)

• Copia el código de Google para establecer reglas CSS para esa fuente.
• En tu cuenta de HubSpot, dirígete a Marketing > CTA.
• Pasa el ratón por encima de una CTA y haz clic en Acciones > 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 formulario

• En tu cuenta de HubSpot, dirígete a Marketing > Formularios.
• Coloca el cursor sobre el nombre del formulario y haz clic en Acciones > Editar formulario o Crea un nuevo formulario.
• En el editor de formularios, haz clic en la pestaña Estilo y vista preliminar. 
• En el menú de la barra lateral izquierda, haz clic en la sección Estilo.
• En la sección Texto, haz clic en el menú desplegable Familia de fuentes y selecciona una Fuente de Google.  
• En la parte superior derecha, haz clic en Actualizar o Publicar para activar tus cambios. 

Usar 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 Contenido > Administrador de diseño.

• En el buscador de la izquierda, abre el módulo personalizado. Más información sobre cómo crear un módulo personalizado.
• En el inspector de la derecha, haz clic en el menú desplegable Agregar campo Agregar campo en la sección Campos y selecciona Fuente. Más información sobre cómo trabajar con campos de fuente.  

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

• Ve al contenido en el que quieres añadir el enlace:

  • Páginas de sitio web: En tu cuenta de HubSpot, dirígete a Contenido > Páginas web.
  • Páginas de destino: En tu cuenta de HubSpot, dirígete a Contenido > Landing pages.
  • Artículos de blog: En tu cuenta de HubSpot, dirígete a Contenido > Blog.
• Haz clic en el nombre del contenido que utiliza el contenido personalizado. 
• 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 fuentes personalizados

Como alternativa al uso de fuentes web estándar o de una biblioteca de fuentes como Google Fonts, puedes subir archivos de fuente y utilizarlos en temas o hacer referencia a ellos en hojas de estilo. 

Utilizar fuentes personalizadas en los temas

En el editor de temas, puedes subir una fuente personalizada y utilizarla en páginas y publicaciones. Se admiten archivos de fuente en los siguientes formatos: TTF, OTF, WOFF.

Subir fuentes personalizadas

• Ve al contenido en el que quieres añadir el enlace:

  • Páginas de sitio web: En tu cuenta de HubSpot, dirígete a Contenido > Páginas web.
  • Páginas de destino: En tu cuenta de HubSpot, dirígete a Contenido > Landing pages.
  • Artículos de blog: En tu cuenta de HubSpot, dirígete a Contenido > Blog.
• Haz clic en el nombre de tu contenido. 
• En el editor de contenido, haz clic en el menú Editar y selecciona Tema: [Nombre del tema].
• En el menú de la barra lateral izquierda, haz clic en el menú desplegable de una fuente y selecciona Cargar una fuente personalizada. 
• En el panel derecho, introduce una etiqueta para tu fuente en el campo Nombre de la fuente. 
• Haz clic en Elegir archivos de fuente y selecciona uno o más archivos de fuentes y luego haz clic en Siguiente. 

• Haz clic en el menú desplegable Estilo de fuente 1 y selecciona el estilo que utiliza tu archivo de fuente. Cada estilo debe utilizar un archivo de fuente distinto. 
• Para agregar estilos de fuente adicionales, haz clic en + Agregar otro estilo de fuente y luego agrega tus estilos de fuente. Cada archivo de fuente subido debe tener al menos un estilo asociado. 
• Cuando hayas agregado todos los estilos de fuente aplicables, haz clic en Listo.

Editar fuentes personalizadas

Una vez que hayas subido una fuente personalizada en el editor de temas, puedes subir fuentes adicionales, personalizar las que ya existen con estilos de fuente adicionales o eliminar fuentes. 

• Ve al contenido en el que quieres añadir el enlace:

  • Páginas de sitio web: En tu cuenta de HubSpot, dirígete a Contenido > Páginas web.
  • Páginas de destino: En tu cuenta de HubSpot, dirígete a Contenido > Landing pages.
  • Artículos de blog: En tu cuenta de HubSpot, dirígete a Contenido > Blog.
• Haz clic en el nombre de tu contenido. 
• En el editor de contenido, haz clic en el menú Editar y selecciona Tema: [Nombre del tema].
• En el menú de la barra lateral izquierda, haz clic para ampliar la sección Fuentes.
• Haz clic en una fuente del menú desplegable y selecciona Gestionar fuentes personalizadas.
• Para agregar una nueva fuente, haz clic en Agregar una fuente personalizada en el cuadro de diálogo. 
• Para editar una fuente:
  • En el cuadro de diálogo, haz clic en el menú desplegable Acciones situado junto a la fuente y seleccione Editar.
  • Para cambiar el nombre de la fuente, haz clic en Editar junto al nombre de la fuente y, a continuación, introduce un nuevo nombre de fuente. 
  • Para agregar estilos de fuente adicionales, haz clic en Agregar otro estilo de fuente, luego haz clic en el menú desplegable Estilo de fuente y selecciona un estilo. Haz clic en Subir y, a continuación, sube un archivo de fuente. 
  • Para eliminar un estilo de fuente, haz clic en el icono deletededel eliminar situado junto al estilo de fuente. No puedes eliminar un estilo de fuente si no hay otros estilos de fuente en la lista. 
  • Haz clic en Guardar. 
• Para eliminar una fuente, haz clic en el menú desplegable Acciones del cuadro de diálogo y selecciona Eliminar. 

Nota: al eliminar una fuente, ésta desaparece de todos los menús desplegables, pero los archivos de fuente permanecerán en la herramienta de archivos hasta que se eliminen allí. 

• Cuando hayas terminado de editar las fuentes, haz clic en Listo.

Utilizar fuentes personalizadas en las hojas de estilo

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

Nota: las fuentes personalizadas solo están disponibles en las cuentas con acceso al administrador de diseño y deben aplicarse con 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. Se recomienda subir por lo menos las versiones .woff, .ttf y .eot de la fuente para garantizar que la fuente se cargue en todos los navegadores 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 Biblioteca > 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 Contenido > Administrador 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: 'Your Font Name'; 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 tu_archivo_fuente.xxxx? con 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. 

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 Contenido > Administrador de diseño.
• En el buscador, abre la plantilla de correo electrónico codificado personalizado.
• Para cada estilo de fuente:
  • En la sección <head> de la plantilla, pega este código entre las etiquetas <style>....</style>:  

@font-face { font-family: 'Your Font Name'; 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 tu_archivo_fuente.xxxx? con 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

Después de agregar una fuente personalizada a tu tema, puedes utilizarla con CTA:

• En tu cuenta de HubSpot, dirígete a Marketing > CTA.
• En la parte superior izquierda, haz clic en el menú desplegable y selecciona CTA.
• Pasa el ratón por encima de una CTA y haz clic en Acciones > Editar. 
• En el panel izquierdo del editor de CTA, haz clic en la pestaña Diseño.  
• Haz clic en la sección Estilos para ampliarla.
• Haz clic en el menú desplegable Fuente principal y selecciona tu fuente personalizada. 
• Continúa creando tu CTA. 

Usar una fuente personalizada en una CTA (heredado)

Al igual que con las CTA, después de cargar un archivo de formulario personalizado, puedes utilizarlo con las CTA heredadas:

• En tu cuenta de HubSpot, dirígete a Marketing > CTA.
• Pasa el ratón por encima de una CTA y haz clic en Acciones > Editar. 
• En el panel derecho, haz clic en Opciones avanzadas.  
• En el cuadro de texto, pega este código: 

font-family: 'Your Font Name';

• 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. 

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 de blog o página personalizados: Aprende cómo agregar una fuente personalizada a una plantilla de correo electrónico codificada personalizada. 

• En tu cuenta de HubSpot, dirígete a Contenido > Administrador 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: 'Your Font Name'; 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 tu_archivo_fuente.xxxx? con 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 Publicar cambios para activar los cambios.