Usar fuentes personalizadas en posts o páginas

Como alternativa, usar fuentes web estándar o usar una biblioteca de fuentes como Google fonts, puedes alojar archivos de fuentes en tu administrador de archivos y hacerlos referencia en tu archivo CSS. 

La adición de una fuente personalizada no agregará la fuente a ninguna opción de estilo de fuente en los editores de HubSpot. En cambio, deberás usar CSS para diseñar elementos de texto en tus páginas.

Para que las fuentes puedan cargarse en todos los navegadores, necesitarás varios formatos de la misma fuente. Se recomienda incluir un mínimo de versiones .woff, .ttf, y .eot de la fuente. 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. También necesitarás crear reglas de @font-face adicionales para diferentes estilos y pesos (por ejemplo, oblicuo, negrita, claro, etc.). 

Para agregar fuentes personalizadas a tus hojas de estilo, carga los archivos de fuentes a la herramienta de archivos: 

• 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 los mejores resultados de rendimiento, haz clic en el menú desplegable URL del archivo y selecciona el dominio en el que tu sitio está alojado.
• En el panel del administrador de archivos, haz clic en el nombre del archivo de fuentes.
• En el panel derecho, haz clic en Copiar URL para obtener la URL de la fuente para agregar a tu hoja de estilo.

• En tu cuenta de HubSpot, dirígete a Marketing > Archivos y plantillas > Herramientas de diseño.
• Abre la hoja de estilo aplicada a tu plantilla de blog o página.
• En la parte superior de la hoja de estilo, pega el siguiente código @font-face. 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');}

• Reemplaza tu_archivo_fuente.xxxx? con la URL de la herramienta de archivos. Repetir para cada formato. 
• Reemplaza «Tu nombre de fuente» con el nombre de tu fuente personalizada. 

Después de reemplazar las URL de familia de fuentes y de origen de fuente en tu código, puedes hacer referencia a la font-family personalizada en tu hoja de estilo. 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';
}