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í.
CMS-General

¿Cómo puedo implementar una fuente personalizada en HubSpot?

Última actualización: enero 15, 2019

Requisitos

Marketing Hub Professional, Enterprise
Básico
HubSpot CMS

Como alternativa, usar fuentes web estándar o usar una biblioteca de fuentes como fuentes de Google, puedes alojar archivos de fuentes en tu administrador de archivos y hacerlos referencia 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 .eot, .woff y .ttf de la fuente. También necesitarás crear reglas de @font-face adicionales para diferentes estilos y pesos (por ejemplo, oblicuo, negrita, claro, etc.

Ten en cuenta que estos pasos solo funcionan 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

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. Cuando tengas todos tus archivos de fuentes, sigue estos pasos:

  • En tu cuenta de HubSpot, dirígete a Marketing > Archivos y plantillas > Herramientas de diseño.
  • Abre la hoja de estilo aplicada a tu página o plantilla de blog.
  • En la parte superior de tu archivo CSS, pega el siguiente código @font-face. Deberás incluir múltiples reglas si estás importando archivos para varios estilos de familia de fuentes.
@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');}

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

  • En tu cuenta de HubSpot, dirígete a Marketing > Archivos y plantillas > Archivos.
  • Haz clic en Cargar archivos y elige los archivos de fuente para cargar.  
  • Para obtener mejores resultados, usa el menú desplegable en la URL del archivo para seleccionar el dominio en el que tu sitio está alojado en la URL del archivo.
  • Haz clic en el archivo del panel de tu administrador de archivos y luego haz clic en Copiar URL para obtener la URL de la fuente para agregar a tu hoja de estilo.

file-manager-change-domain


Una vez que hayas reemplazado la familia de la fuente (font-family) y las URL de la fuente en tu código, 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 {
font-family: 'Jurassic Park';
src: url('http://designers.hubspot.com/hubfs/jurassic-park.eot?') format('eot'), url('http://designers.hubspot.com/hubfs/jurassic-park.woff') format('woff'), url('http://designers.hubspot.com/hubfs/jurassic-park.ttf') format('truetype');
}

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

body {
font-family: 'Jurassic Park';
}