Skip to content
Design Manager

Use custom fonts on blog posts or pages

Last updated: June 16, 2021

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.

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: custom fonts cannot be used in:

To add custom fonts to your stylesheets, upload your font files to the files tool: 

  • In your HubSpot account, navigate to Marketing > Files and Templates > Files.
  • Click Upload files and select the font files to upload. 
  • In the file manager dashboard, click the name of the font file.
  • In the right panel, click Copy URL to get the URL of the font to add to your stylesheet. For best rendering results, click the File URL dropdown menu and select the domain your site is hosted on.


Next, open your stylesheet in the design manager: 
@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');}
  • Replace with the URL from the files tool. Repeat for each format. 
  • Replace 'Your Font Name' with the name of your custom font. 

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