Design Manager

Use custom fonts on blog posts or pages

Last updated: November 9, 2020

Applies to:

Marketing Hub  Professional, Enterprise
CMS Hub  Professional, Enterprise
Legacy Marketing Hub Basic

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. 

Adding a custom font will not add the font to any font styling options in HubSpot's editors. You'll instead need to use CSS to style text elements on your pages.

Please note: custom fonts can't be used on pages built with starter templates

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.


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('') 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';