Usar fuentes en HubSpot

Las fuentes en HubSpot están disponibles de diferentes maneras dependiendo del tipo de contenido y tipo de fuente. Algunos tipos de letra predeterminados están disponibles en todos los editores de contenidos. Puede ser necesario añadir fuentes web y fuentes personalizadas a la configuración de temas, hojas de estilo, módulos personalizados o plantillas codificadas.

Antes de empezar

Antes de empezar a utilizar fuentes en HubSpot, revisa los requisitos y consideraciones.

Comprender las limitaciones y consideraciones

• No todos los tipos de contenido están disponibles en todas las cuentas. Para confirmar qué tipos de contenidos están disponibles para su suscripción, consulte el catálogo de servicios de Product & .
• Revise la tabla siguiente para saber qué opciones de fuente están disponibles para cada tipo de contenido:

Utilizar fuentes por defecto en los módulos de texto enriquecido

Las fuentes predeterminadas son compatibles con todo el contenido de HubSpot, aunque las opciones disponibles y dónde puedes aplicarlas dependen del tipo de contenido.

1. Ve al contenido:

   • Páginas de sitio web: En tu cuenta de HubSpot, dirígete a Contenido > Páginas web.
   • Landing Pages: 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.
   • Correo electrónico: En tu cuenta de HubSpot, dirígete a Marketing > Correo electrónico.
2. Haz clic en el nombre de tu contenido.
3. En el editor de contenido, haz clic en un módulo de texto enriquecido y, luego, resalta el texto que deseas editar. 
4. 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:

Utilizar fuentes web

Las fuentes web son compatibles con algunos contenidos de HubSpot, pero no están disponibles en el menú desplegable Fuente del editor de texto enriquecido. Dependiendo del tipo de contenido, las fuentes web pueden aplicarse en la configuración del tema, hojas de estilo, módulos personalizados o plantillas codificadas. 

Los desarrolladores pueden utilizar el campo de fuente para añadir fuentes web a temas y módulos personalizados. Cuando se añaden fuentes web de esta forma, HubSpot las carga directamente en el dominio del contenido en lugar de cargarlas desde un servicio de terceros.

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

1. Navega a fonts.google.com.
2. En la barra de búsqueda, ingresa un nombre de fuente. 
3. Haz clic en el nombre de la fuente para ver una lista de estilos disponibles para importar.
4. Haz clic en Obtener fuente en la parte superior derecha.
5. Haga clic en Obtener código para insertar en la parte superior derecha.
6. En la columna de la derecha, seleccione @import en la pestaña Web .
7. Copie el código @import sin la etiqueta <style> .
8. Copie elcódigo de la clase CSS para establecer reglas CSS. 

9. Después de copiar el código de Google Fonts, puedes añadir 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 (versión anterior)
  • 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

1. Copia el código @import de la fuente de Google Fonts.
2. En tu cuenta de HubSpot, dirígete a Contenido > Administrador de diseño.
3. En el buscador, abre la hoja de estilo utilizada para tu contenido.
4. Pegue el código @import en la línea 1 de la hoja de estilo. 
5. Agrega el código para establecer reglas CSS a los selectores apropiados en la hoja de estilo.
6. 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

Google Fonts es compatible con Apple Mail y algunos otros clientes de correo electrónico, pero la compatibilidad general es limitada. Los clientes de correo electrónico más populares sólo admiten fuentes web predeterminadas. Más información sobre la selección de las fuentes predeterminadas utilizadas en el editor de correo electrónico clásico. 

Para añadir una fuente de Google a una plantilla de correo electrónico con código personalizado: 

1. Copia el código @import de la fuente de Google Fonts.
2. En tu cuenta de HubSpot, dirígete a Contenido > Administrador de diseño.
3. En el buscador, abre la plantilla de correo electrónico codificado personalizado.
4. En la<head> sección de la plantilla, pega el código @import entre las etiquetas <style>....</style>. 
5. En la sección <body> de la plantilla, añada la fuente personalizada en estilo inline. 
6. En la parte superior derecha, haz clic en Publicar cambios para activar los cambios. 

Usar una fuente de Google Fonts en una CTA (versión anterior)

1. Copia el código de Google para establecer reglas CSS para esa fuente.
2. En tu cuenta de HubSpot, dirígete a Marketing > CTA.
3. Pasa el cursor por encima de una CTA y haz clic en Acciones > Editar. 
4. En el panel derecho, haz clic en Opciones avanzadas. 
5. En el cuadro de texto, pega el código de Google para establecer reglas CSS para esa fuente. 
6. En la parte inferior derecha, haz clic en Siguiente. Luego haz clic en Guardar.

Usar una fuente de Google Fonts en un formulario

1. En tu cuenta de HubSpot, dirígete a Marketing > Formularios.
2. Pase el ratón por encima del nombre del formulario y haga clic en Acciones > Editar formulario o Crear un nuevo formulario.
3. En el editor de formularios, haz clic en la pestaña Estilo y vista preliminar. 
4. En el menú de la barra lateral izquierda, haz clic en la sección Estilo.
5. En la sección Texto, haz clic en el menú desplegable Familia de fuentes y selecciona una Fuente de Google. 
6. 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.

1. En tu cuenta de HubSpot, dirígete a Contenido > Administrador de diseño.
2. En el buscador, haga clic en el nombre de un módulo personalizado. Más información sobre cómo crear un módulo personalizado.
3. En el inspector, haga clic en el menú desplegable Añadir campo de la sección Campos y seleccione Fuente. Más información sobre cómo trabajar con campos de fuentes.

4. En la parte superior derecha, haz clic en Publicar cambios para activar los cambios. 
5. Ve al contenido:
   • Páginas de sitio web: En tu cuenta de HubSpot, dirígete a Contenido > Páginas web.
   • Landing Pages: 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.
6. Haz clic en el nombre del contenido que utiliza el contenido personalizado. 
7. En el editor de contenido, haz clic en el módulo personalizado.  
8. 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, sube archivos de fuentes y utilízalos en temas o haz referencia a ellos en hojas de estilo. 

Utilizar fuentes personalizadas en los temas

En el editor de temas, sube una fuente personalizada y utilízala en páginas y entradas. Se admiten archivos de fuente en los siguientes formatos: TTF, OTF, WOFF.

Subir fuentes personalizadas para páginas o publicaciones

Una vez subidas las fuentes personalizadas, estarán disponibles para páginas, entradas o artículos de la base de conocimientos.

1. Ve al contenido:

   • Páginas de sitio web: En tu cuenta de HubSpot, dirígete a Contenido > Páginas web.
   • Landing Pages: 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.
2. Haz clic en el nombre de tu contenido. 
3. En el editor de contenido, haz clic en el menú Editar y selecciona Tema: [Nombre del tema].
4. En el menú de la barra lateral izquierda, haz clic en cualquier menú desplegable de fuentes y selecciona Gestionar fuentes de marca.
5. Siga los pasos de este artículo de la base de conocimientos para añadir o editar sus fuentes.

Subir fuentes personalizadas para artículos de la base de conocimientos

Una vez subidas las fuentes personalizadas, estarán disponibles para páginas, entradas o artículos de la base de conocimientos.

1. En tu cuenta de HubSpot, ve a Servicio al cliente > Base de conocimientos.
2. En la parte superior derecha, haz clic en Personalizar plantilla.
3. En la barra lateral izquierda, haz clic en la pestaña Diseño.
4. En la barra lateral izquierda, haz clic en Estilos de fuente.
5. Haga clic en cualquier menú desplegable de fuentes y seleccione Gestionar fuentes de marca.
6. Siga los pasos de este artículo de la base de conocimientos para añadir o editar sus fuentes.

Editar fuentes personalizadas

Después de subir una fuente personalizada en el editor de temas, puede subir fuentes adicionales, personalizar las fuentes existentes con estilos de fuente adicionales o eliminar fuentes.

Utilizar fuentes personalizadas en las hojas de estilo

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

Nota: las fuentes personalizadas sólo 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 al menos las versiones .woff,.ttf y .eot de la fuente para garantizar que se carga en todos los navegadores. Puedes usar el modo Experto en la herramienta de conversión de Font Squirrel para generar formatos de archivo adicionales.

1. En tu cuenta de HubSpot, ve a Contenido > Archivos. Si utilizas las herramientas gratuitas de HubSpot, ve a Marketing > Correo. En la parte superior derecha, haz clic en Herramientas de correo electrónico y selecciona Archivos.
2. Haga clic en Subir archivos.
3. En el disco duro de la computadora, selecciona los archivos de fuente y luego haz clic en Abrir.
4. Haz clic en el nombre de un archivo de fuente cargado.
5. 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

Después de añadir 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 separada. Más información sobre cómo trabajar con hojas de estilo en HubSpot. 

1. En tu cuenta de HubSpot, dirígete a Contenido > Administrador de diseño.
2. En el buscador, abre la hoja de estilo utilizada para tu contenido.
3. 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.

4. Crea reglas CSS con la propiedad font-family para aplicar la fuente personalizada. 
5. 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 coherente a sus lectores, se recomienda utilizar fuentes web predeterminadas en los mensajes de correo electrónico. 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.

1. En tu cuenta de HubSpot, dirígete a Contenido > Administrador de diseño.
2. En el buscador, haga clic en el nombre de su plantilla de correo electrónico con código personalizado.
3. Para cada estilo de fuente:
   • En la sección <head> de la plantilla, pegue 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');}

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

4. En el código del cuerpo del correo electrónico, añada la fuente personalizada en estilo inline. 
5. 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 añadir una fuente personalizada a su tema, puede utilizarla con las CTA.

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

Usar una fuente personalizada en un CTA (anterior)

Al igual que con las CTA, después de subir un archivo de fuente personalizado, utilícelo con las CTA heredadas.

1. En tu cuenta de HubSpot, dirígete a Marketing > CTA.
2. Pasa el ratón por encima de una CTA y haz clic en Acciones > Editar. 
3. En el panel derecho, haz clic en Opciones avanzadas. 
4. En el cuadro de texto, pega este código:
   
   font-family: 'Your Font Name';
5. Sustituya Su nombre de fuente por el nombre de la fuente.
6. En la parte inferior derecha, haz clic en Siguiente. Luego haz clic en Guardar.

Usar una fuente personalizada en un módulo personalizado

Después de añadir una fuente personalizada a la herramienta de archivos, utilízala en módulos personalizados de blog o página. Aprende cómo agregar una fuente personalizada a una plantilla de correo electrónico codificada personalizada. 

1. En tu cuenta de HubSpot, dirígete a Contenido > Administrador de diseño.
2. En el buscador, haga clic en el nombre del módulo personalizado.
3. En el editor de módulos, 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');}

5. • 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.
6. Crea reglas CSS con la propiedad font-family para aplicar la fuente personalizada. 
7. En la parte superior derecha, haz clic en Publicar cambios para activar los cambios.