COS-General

How do I implement a custom font on HubSpot?

Last updated: December 13, 2016

Available For:

Marketing: Basic, Pro, Enterprise
Sales: N/A

As an alternative to using standard web fonts or using a font library like Google fonts, you can host font files in 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.

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. Read more here.

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 the 3 font files, follow these steps:

  • Navigate in HubSpot Marketing to Content > File Manager
  • Click Upload files... and select the font files to upload
  • Navigate to Content > Design Manager
  • Open the CSS that is being applied to your page or blog template
  • Towards the top of your CSS file, paste in the following @font-face code below
@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.

  • Once you have pasted in that code, replace the font-family with the name of the font
  • Click Actions > Insert file
  • Locate the font file
  • For best rendering results, select the domain that your content is hosted on
  • Click Use file
User-added image
User-added image

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

@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');}body{font-family: 'Jurassic Park';}