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

Utilizar fuentes en HubSpot

Última actualización: septiembre 27, 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. Algunas fuentes predeterminadas están disponibles en todos los editores de contenido, mientras que las fuentes de Google Fonts y las fuentes personalizadas tienen restricciones adicionales, que se describen a continuación: 

Tipo de contenido Tipo de letra  
  Fuentes por defecto Fuentes de Google

Fuentes personalizadas

 
Página - plantillas de inicio Disponible en la pestañaDiseño del editor de contenidos No disponible  
Página - plantillas temáticas Disponible en la configuración del tema y a través de la hoja de estilos Disponible a través de la hoja de estilo  
Página - plantilla codificada Disponible a través de una hoja de estilo o un módulo personalizado Disponible a través de la hoja de estilo  
Blog Disponible a través de una hoja de estilo o un módulo personalizado Disponible a través de la hoja de estilo  
Correo electrónico Algunas fuentes por defecto no están disponibles en el editor de correo electrónico de arrastrar y soltar Disponible sólo para plantillas de correo electrónico codificadas a medida; no es compatible con la mayoría de los clientes de correo electrónico Disponible sólo para plantillas de correo electrónico codificadas a medida; no es compatible con la mayoría de los clientes de correo electrónico  
Base de conocimientos Disponible en la pestaña Ficha de diseño del editor de plantillas No disponible  
Módulo personalizado Disponible para los módulos personalizados que no se utilizan en los correos electrónicos Disponible para los módulos personalizados que no se utilizan en los correos electrónicos  
CTA  

Utilizar fuentes por defecto

Las fuentes predeterminadas pueden utilizarse en todo tipo de contenidos 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 contenidos, haga clic en un módulo de texto enriquecido y, a continuación, resalte el texto que desea editar
  • En la barra de herramientas de texto enriquecido, haga clic en el menú desplegable Fuente y seleccione una fuente. Los siguientes tipos de letra están disponibles en los módulos de texto enriquecido
    • Andale Mono*

    • Arial

    • Libro Antiqua*

    • Courier New

    • Georgia

    • Helvética

    • Impacto*

    • Lato**
    • Merriweather**
    • Mónaco*
    • Símbolo*

    • Tahoma

    • Terminal*

    • Times New Roman

    • Trebuchet MS

    • Verdana

*No está disponible en el editor de correo electrónico de arrastrar y soltar.  

**Sólo disponible como fuente web en el editor de correo electrónico de arrastrar y soltar.

Utilice las fuentes de Google

Las fuentes de Google están disponibles en el editor de contenidos para las páginas que utilizan plantillas y temas iniciales, así como para los artículos de la base de conocimientos y los módulos personalizados. Para utilizar una fuente de Google en otras páginas, tendrás que copiar el código de importación de la fuente, pegarlo en la hoja de estilos de la página y, a continuación, aplicar la fuente con reglas CSS.

Obtenga más información sobre cómo los desarrolladores pueden utilizar los campos de fuentes para añadir Google Fonts a los temas y módulos personalizados en la documentación para desarrolladoresde HubSpot. 

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

  • Navega a fonts.google.com.
  • En la barra de búsqueda, introduzca un nombre de fuente
  • Haga clic en el nombre de la fuente para ver una lista de estilos disponibles para importar.
  • Junto a cada estilo que desee importar, haga clic en + Seleccionar este estilo
  • En el panel de la derecha, seleccione @import en la sección Uso en la web. 
  • Copie el código de la fuente: 
    • En la sección Uso en la web , copie el código @import sin la <style> etiqueta.
    • En el campo Reglas CSS para especificar familias , copie el código para establecer reglas CSS. 

copiar-google-font

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

Utilizar una fuente de Google en una hoja de estilo

  • Copie 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, abra la hoja de estilo utilizada para su contenido.
  • Pegue el código @import en la línea 1 de la hoja de estilos
  • Añade el código para establecer las reglas CSS a los selectores apropiados en la hoja de estilos. 
add-google-fonts-imported-font-to-stylesheet
  • En la parte superior derecha, haga clic en Publicar o Actualizar para que los cambios se apliquen. 

Utilizar una fuente de Google en una plantilla de correo electrónico con código personalizado

Aunque Google Fonts es compatible con Apple Mail y algunos otros clientes de correo electrónico, la compatibilidad general es limitada y la mayoría de los clientes de correo electrónico más populares sólo admiten las fuentes web predeterminadas. Más información sobre la selección de los tipos de letra por defecto utilizados en el editor de correo electrónico clásico actualizado 
 
Para añadir una fuente de Google a una plantilla de correo electrónico con código personalizado: 
  • Copie 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, abra la plantilla de correo electrónico codificada personalizada.
  • En lasección<head> de la plantilla, pegue el código @import entre las etiquetas <style>....</style>
  • En el código del cuerpo del correo electrónico, añada la fuente personalizada en estilo inline
  • En la parte superior derecha, haga clic en Actualizar o Publicar para que los cambios se apliquen. 

Utilizar una fuente de Google en un CTA

  • Copia el código de Google para establecer las reglas CSS para esa fuente.
  • En tu cuenta de HubSpot, dirígete a Marketing > Captación de oportunidades de venta > CTAs.
  • Pase el ratón por encima de una CTA, haga clic en el menú desplegable Acciones y seleccione Editar 
  • En el panel derecho, haga clic en Opciones avanzadas 
  • En el cuadro de texto, pega el código de Google para establecer las reglas CSS para esa fuente
  • En la parte inferior derecha, haga clic en Siguiente. A continuación, haga clic en Guardar

Utilizar una fuente de Google en un módulo personalizado

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


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

campo de click-add

  • En la parte superior derecha, haga clic en Publicar cambios para que los cambios se apliquen
  • 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.
  • Pase el ratón por encima del contenido que utiliza el módulo personalizado y haga clic en Editar
  • En el editor de contenidos, haga clic en el módulo personalizado
  • En el editor de la barra lateral, haz clic en el menú desplegable del campo Fuente y selecciona una fuente de Google

Utilizar fuentes personalizadas

Como alternativa al uso de fuentes web estándar o a la utilización de una biblioteca de fuentes como Google Fonts, puedes alojar archivos de fuentes en la herramienta de archivos y luego referenciarlos en tu hoja de estilos. 

Tenga en cuenta que las fuentes personalizadas deben aplicarse mediante CSS. Alañadir una fuente personalizada no se añade la fuente a los menús desplegables de estilo en el editor de contenido

Para utilizar una fuente en el contenido, cargue los archivos de la fuente en la herramienta de archivos. HubSpot recomienda subir un mínimo de las versiones.woff, .ttf, y .eot de la fuente para asegurar que su fuente se carga en todos los navegadores

s. Puede utilizar el modo experto de la herramienta de conversión de Font Squirrel para generar otros formatos de archivo.

  • En tu cuenta de HubSpot, dirígete a Marketing > Archivos y plantillas > Archivos.
  • Haga clic en Cargar archivos
  • En el disco duro de su ordenador, seleccione los archivos de fuentes y haga clic en Abrir
  • Haga clic en el nombre de un archivo de fuente cargado. 
  • En el panel de la derecha, haga clic en Copiar URL para copiar la URL donde está alojado el archivo. Necesitará la URL de la fuente en cada formato de archivo. 

Utilizar una fuente personalizada en una hoja de estilos

Una vez que haya añadido una fuente personalizada a la herramienta de archivos, puede hacer referencia a ella en una hoja de estilos. Cada estilo de fuente (cursiva, negrita, etc.) requerirá una regla @font-face independiente. 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, abra la hoja de estilo utilizada para su contenido.
  • Para cada estilo de letra
    • En la parte superior de la hoja de estilos, pegue 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');}
    • Sustituya su nombre de fuente por el nombre de la fuente.
    • Sustituya your_font_file.xxx? por laURL de la herramienta de archivos. Repita la operación para cada formato de archivo
  • Cree reglas CSS con la propiedad font-family para aplicar la fuente personalizada. 
  • En la parte superior derecha, haga clic en Actualizar o Publicar para que los cambios se apliquen. 

sample-custom-font-in-stylesheet

Utilizar un tipo de letra personalizado en una plantilla de correo electrónico con código personalizado

La mayoría de los clientes de correo electrónico populares no admiten fuentes personalizadas. Para asegurar una experiencia consistente para sus lectores, utilizar fuentes web por defecto en los correos electrónicos se recomienda Sin embargo, si desea añadir una fuente personalizada a una plantilla de correo electrónico codificada, puede hacerlo una vez que haya añadido 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, abra la plantilla de correo electrónico codificada personalizada.
  • Para cada estilo de letra:
    • En la <head> sección de la plantilla, pegue este código entre las etiquetas</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');}
    • Sustituya su nombre de fuente por el nombre de la fuente.
    • Sustituya your_font_file.xxx? por laURL de la herramienta de archivos. Repita la operación para cada formato de archivo
  • En el código del cuerpo del correo electrónico, añada la fuente personalizada en estilo inline
  • En la parte superior derecha, haga clic en Actualizar o Publicar para que los cambios se apliquen. 

Utilizar una fuente personalizada en un CTA

Una vez que haya añadido una fuente personalizada a la herramienta de archivos, puede utilizarla en los CTA: 

  • En tu cuenta de HubSpot, dirígete a Marketing > Captación de oportunidades de venta > CTAs.
  • Pase el ratón por encima de una CTA, haga clic en el menú desplegable Acciones y seleccione Editar 
  • En el panel derecho, haga clic en Opciones avanzadas 
  • En el cuadro de texto, pegue este código: 

font-family: 'Su nombre de fuente';

  • Sustituya su nombre de fuente por el nombre de la fuente
  • En la parte inferior derecha, haga clic en Siguiente. Luego haz clic en Guardar

set-custom-font-for-cta

Utilizar una fuente personalizada en un módulo personalizado

Una vez que haya añadido una fuente personalizada a la herramienta de archivos, podrá utilizarla en módulos personalizados: 

  • En tu cuenta de HubSpot, dirígete a Marketing > Archivos y plantillas > Herramientas de diseño.
  • En el buscador, abra el módulo personalizado.
  • En la sección module.css, pegue 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');}
  • Sustituya su nombre de fuente por el nombre de la fuente.
  • Sustituya your_font_file.xxx? por laURL de la herramienta de archivos. Repita la operación para cada formato de archivo.
  • Cree reglas CSS con la propiedad font-family para aplicar la fuente personalizada. 

custom-module-custom-font

  • En la parte superior derecha, haga clic en Publicar cambios para que los cambios se apliquen.