CMS-General

¿Cómo puede implementarse una fuente personalizada en HubSpot?

Última actualización: November 2, 2017

Requisitos

Marketing Hub
marketing-basic-pro-enterprise
Básico, Professional, Enterprise

Como una alternativa para no utilizar las fuentes web estándar ni una biblioteca de fuentes como Google fonts, puedes alojar archivos de fuentes en el Administrador de Archivos y hacer referencia a ellos en tu archivo CSS.

Para que las fuentes puedan cargarse en todos los navegadores, necesitarás varios formatos de la misma fuente. Para obtener los mejores resultados, necesitarás como mínimo las versiones .woff, .ttf y .eot de la fuente. También deberás crear reglas @font-face adicionales para los distintos estilos y pesos de la fuente (p. ej., cursiva, negrita, simple, etc.).

Ten en cuenta que estos pasos solo funcionarán para el contenido de la página web y no para las plantillas de correo electrónico, ya que la mayoría de los clientes de correo electrónico no admiten fuentes personalizadas. Obtén más información aquí.

Si utilizas una fuente que puede usarse legalmente en la web, puedes utilizar la herramienta de conversión Font Squirrel para generar los distintos formatos de archivo. Una vez que tengas los 3 archivos de fuentes, realiza los siguientes pasos:

  • En HubSpot Marketing, dirígete a Contenido > Administrador de Archivos.
  • Haz clic en Cargar Archivos... y selecciona los archivos de fuentes que deseas cargar.
  • Dirígete a Contenido > Administrador de Diseño.
  • Abre la hoja de estilo que se aplica a tu plantilla de página o blog.
  • En la parte superior de tu archivo CSS, pega el código @font-face que aparece a continuación. Deberás incluir distintas reglas si estás importando archivos para múltiples estilos de familias de fuentes.
@font-face { familia de fuente: 'Tu nombre de fuente';  src: url('tu_archivo_fuente.eot?') formato('eot'), url('tu_archivo_fuente.woff') formato('woff'), url('tu_archivo_fuente.ttf') formato('truetype');}

A continuación, deberás reemplazar las URL de fuentes en el bloque de código font-face para hacer referencia a tu fuente alojada.

  • Una vez que hayas pegado ese código, reemplaza la familia de la fuente con el nombre de la fuente.
  • Haz clic en Acciones > Insertar Archivo.
  • Busca el archivo de la fuente.
  • Para lograr resultados óptimos, selecciona el dominio en el que está alojado tu contenido.
  • Haz clic en Usar Archivo.
Fuentes administrador de archivos
Imagen agregada por el usuario

Una vez que hayas reemplazado la familia de la fuente y las URL de la fuente en tu código, ya estás listo para comenzar a hacer referencia a esa familia de fuentes personalizada en tu CSS. A continuación, puedes ver un ejemplo de cómo podría verse el código final, en el cual la fuente personalizada se aplica al elemento del cuerpo de la página.

/* Jurassic Park Normal */
@font-face {
familia de fuente: 'Jurassic Park';
src: url('http://designers.hubspot.com/hubfs/jurassic-park.eot?') formato('eot'), url('http://designers.hubspot.com/hubfs/jurassic-park.woff') formato('woff'), url('http://designers.hubspot.com/hubfs/jurassic-park.ttf') format('truetype');
}

/* Jurassic Park Bold */
@font-face {
familia de fuente: 'Jurassic Park'; src: url('http://designers.hubspot.com/hubfs/jurassic-park-Bold.eot?') formato('eot'), url('http://designers.hubspot.com/hubfs/jurassic-park-Bold.woff') formato('woff'), url('http://designers.hubspot.com/hubfs/jurassic-park-Bold.ttf') formato('truetype');
peso de fuente: 700;
}

body {
familia de fuente: 'Jurassic Park';
}