CMS-General

How do I implement a custom font on HubSpot?

Last updated: August 6, 2018

Applies to:

Marketing Hub Basic, Professional, Enterprise

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

In order for the fonts to load across all browsers, you will need multiple formats of the same font. For the most reliable results you will need a minimum of the .woff, .ttf, & .eot version of the font. You will also need create additional @font-face rules for different styles and weights (i.e. oblique, bold, light, etc).

Please note that these steps will only work for web page content and not for email templates since most email clients do not support custom fonts

If you are 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. Once you have all your font files, follow these steps:

  • In your HubSpot Marketing Hub Basic, Professional, or Enterprise account, navigate to Marketing > Files and Templates > Design Tools.
  • Open the stylesheet applied to your page or blog template.
  • At the top of your CSS file, paste in the following @font-face code. You will need to include multiple rules if you are 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 you will need to replace the font URLs in the font-face code block to reference your hosted font:

  • In your HubSpot Marketing Hub Basic, Professional, or Enterprise account, navigate to Marketing > Files and Templates > Files.
  • Click Upload files and choose the font files to upload. 
  • For best rendering results, use the dropdown in the file URL to select the domain that your site is hosted on for the file URL.
  • Click on the file from your file manager dashboard, then click Copy URL to get the URL of the font to add to your stylesheet.

file-manager-change-domain


Once you have replaced the font-family and the font source URLs in your code, you are ready to start referencing that custom font-family in your CSS. Below is an example of what the final code could look like, where the custom font is being applied to the body element 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';
}

Was this article helpful?

If you still need help you can get answers from the , or to contact support.