CMS-General

Use custom fonts on blog posts or pages

Last updated: November 16, 2018

Applies to:

Marketing Hub  Professional, Enterprise
Legacy Marketing Hub Basic
HubSpot CMS

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

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

file-manager-change-domain

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