Use custom fonts on blog posts or pages

As an alternative to using standard web fonts or using a font library like Google fonts, you can host font files in your file manager and reference them in your stylesheet.

In order for the fonts to load across all browsers, you'll need multiple formats of the same font. It's recommended to include a minimum of the .woff, .ttf, & .eot versions of the font. If you're using a font that can be legally used on the web, you can use Font Squirrel's converter tool to generate the various file formats. You'll also need to create additional @font-face rules for different styles and weights (e.g., oblique, bold, light, etc.). 

Please note: these steps will only work for blog post and web page templates, and not for email templates as most email clients do not support custom fonts. 

• In your HubSpot account, navigate to Marketing > Files and Templates > Design Tools.
• Open the stylesheet applied to your blog or page template.
• At the top of your stylesheet, paste the following @font-face code. Include multiple rules if you're importing files for multiple font family styles.

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

Next, replace the font URLs in the font-face code block to reference your hosted font:

• In your HubSpot account, navigate to Marketing > Files and Templates > Files.
• Click Upload files and select the font files to upload. For best rendering results, click the File URL dropdown menu and select the domain that your site is hosted on.
• In the file manager dashboard, click the name of the font file.
• In the right pane, click Copy URL to get the URL of the font to add to your stylesheet.

After replacing the font-family and the font source URLs in your code, you can reference the custom font-family in your stylesheet. The following is an example of what the final code could look like, where the custom font is being applied to the body of the page.

/* 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';
}