How do I implement a custom font on HubSpot?

Last updated: August 23, 2017

Available For:

Marketing: Basic, Pro, Enterprise
Sales: N/A
Service: 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. 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. 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:

  • In your HubSpot Marketing account, navigate to Content > File Manager.
  • Click Upload files and select the font files to upload.
  • Navigate to Content > Design Manager.
  • Open the stylesheet that is being applied to your page or blog template.
  • Towards 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 mutliple 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.

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

/* Jurassic Park Normal */
@font-face {
font-family: 'Jurassic Park';
src: url('') format('eot'), url('') format('woff'), url('') format('truetype');

/* Jurassic Park Bold */
@font-face {
font-family: 'Jurassic Park'; src: url('') format('eot'), url('') format('woff'), url('') format('truetype');
font-weight: 700;

body {
font-family: 'Jurassic Park';

Was this article helpful?