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.

Nota: no se pueden usar fuentes personalizadas en páginas creadas con plantillas de starter. 

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.). 

Nota: estos pasos solo funcionan para las plantillas de publicaciones de blog y las plantillas de página web y no para plantillas de correo electrónico como la mayoría de los clientes de correo electrónico no admiten fuentes personalizadas. 

• 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');}

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

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