Last updated: October 3, 2024
Available with any of the following subscriptions, except where noted:
All products and plans
|
The fonts available for content in HubSpot depend on the type of content and the type of font. Certain default fonts are available in all content editors, while web fonts (such as Google Fonts) and custom fonts have additional restrictions, outlined below:
| Content type | Font type | |||
| Default fonts | Web fonts | Custom fonts |
||
| Page - theme templates | ✓ | Available in theme settings and via stylesheet | ✓ | |
| Page - coded template | ✓ | Available via stylesheet or custom module | Available via stylesheet | |
| Blog | ✓ | Available via stylesheet or custom module | ✓ | |
| Some default fonts not available in the drag and drop email editor | Available for custom coded email templates only; not supported in most email clients | Available for custom coded email templates only; not supported in most email clients | ||
| Knowledge base | ✓ | Available on the Design tab of the template editor | Not available | |
| Custom module | ✓ | Available for custom modules not used in emails | Available for custom modules not used in emails | |
| CTA (legacy) | ✓ | ✓ | ✓ | |
| CTA | ✓ | ✓ | ✓ | |
Please note: not all content types are available in all accounts. the content types available for the subscriptions in your HubSpot account can be found in the Product and Services Catalogue.
Use default fonts
Default fonts can be used in all types of content and are designed to load on most platforms and devices.
-
Navigate to your content:
- Website Pages: In your HubSpot account, navigate to Content > Website Pages.
- Landing Pages: In your HubSpot account, navigate to Content > Landing Pages.
- Blog: In your HubSpot account, navigate to Content > Blog.
- Knowledge Base: In your HubSpot account, navigate to Content > Knowledge Base.
- Email: In your HubSpot account, navigate to Marketing > Marketing Email.
- Click the name of your content.
- In the content editor, click a rich text module, then highlight the text you want to edit.
- In the rich text toolbar, click the Font dropdown menu and select a font. The following fonts are available in rich text modules:
-
Andale Mono*
-
Arial
-
Book Antiqua*
-
Courier New
-
Georgia
-
Helvetica
-
Impact*
- Lato**
- Merriweather**
-
-
- Monaco*
-
-
Symbol*
-
Tahoma
-
Terminal*
-
Times New Roman
-
Trebuchet MS
-
Verdana
-
*Not available in the drag and drop email editor.
**Only available as a web font in the drag and drop email editor.
Use web fonts
Web fonts are available by default in the content editor for pages using starter templates and themes, as well as knowledge base articles and custom modules.
If you're a developer, you can also use the font field to add web fonts to themes and custom modules. When used in these ways, web fonts are not loaded from a third-party service; HubSpot will instead load them directly on the content's domain.
Please note: web fonts cannot be selected in the font dropdown menu of the rich text editor.
You can also use third-party services such as Google Fonts by copying the font's import code, pasting it into content's stylesheet, then applying the font through CSS:
- Navigate to fonts.google.com.
- In the search bar, enter a font name.
- Click the font name to view a list of styles available to import.
- Next to each style you want to import, click + Select this style
- In the right panel, select @import in the Use on the web section.
- Copy the font's code:
- In the Use on the web section, copy the @import code without the <style> tag.
- In the CSS rules to specify families field, copy the code for setting CSS rules.
Once you have the code from Google Fonts, you can add the font to your HubSpot content:
- Use a Google Font in a stylesheet
- Use a Google Font in a custom coded email template
- Use a Google Font in a CTA (legacy)
- Use a Google Font in a form
- Use a Google Font in a custom module
Use a Google Font in a stylesheet
- Copy the font's @import code from Google Fonts.
- In your HubSpot account, navigate to Content > Design Manager.
- In the finder, open the stylesheet used for your content.
- Paste the @import code into line 1 of the stylesheet.
- Add the code for setting CSS rules to the appropriate selectors in the stylesheet.
- In the top right, click Publish changes to take your changes live.
Use a Google Font in a custom coded email template
- Copy the font's @import code from Google Fonts.
- In your HubSpot account, navigate to Content > Design Manager.
- In the finder, open the custom coded email template.
- In the
<head>section of the template, paste the @import code between the<style>....</style>tags. - In the code of the email body, add the custom font in inline styling.
- In the top right, click Publish changes to take your changes live.
Use a Google Font in a CTA (legacy)
- Copy Google's code for setting CSS rules for that font.
- In your HubSpot account, navigate to Marketing > CTAs.
- Hover over a CTA, then click the Actions > Edit.
- In the right panel, click Advanced options.
- In the text box, paste Google's code for setting CSS rules for that font.
- In the bottom right, click Next. Then, click Save.
Use a Google Font in a form
- In your HubSpot account, navigate to Marketing > Forms.
- Hover over the form name and click Actions > Edit form or Create a new form.
- In the form editor, click the Style & preview tab.
- In the left sidebar menu, click the Style section.
- In the Text section, click the Font family dropdown menu and select a Google Font.
- In the top right, click Update or Publish to take your changes live.
Use a Google Font in a custom module
Please note: Google Fonts are not available for custom modules used in email templates.
- In your HubSpot account, navigate to Content > Design Manager.
- In the finder on the left, open the custom module. Learn more about creating a custom module.
- In the inspector on the right, click the Add field dropdown in the Fields section and select Font. Learn more about working with font fields.
- In the top right, click Publish changes to take your changes live.
-
Navigate to your content:
- Website Pages: In your HubSpot account, navigate to Content > Website Pages.
- Landing Pages: In your HubSpot account, navigate to Content > Landing Pages.
- Blog: In your HubSpot account, navigate to Content > Blog.
- Click the name of the content using the custom module.
- In the content editor, click the custom module.
- In the sidebar editor, click the Font field dropdown menu and select a Google Font.
Use custom fonts
As an alternative to using standard web fonts or using a font library like Google Fonts, you can upload font files, then use them in themes or reference them in stylesheets.
Use custom fonts in themes
In the theme editor, you can upload a custom font, then use that font in pages and posts. Font files are supported in the following formats: TTF, OTF, WOFF.
Upload custom fonts
-
Navigate to your content:
- Website Pages: In your HubSpot account, navigate to Content > Website Pages.
- Landing Pages: In your HubSpot account, navigate to Content > Landing Pages.
- Blog: In your HubSpot account, navigate to Content > Blog.
- Click the name of your content.
- In the content editor, click the Edit menu and select Theme: [Name of Theme].
- In the left sidebar menu, click a font dropdown menu and select Upload a custom font.
- In the right panel, enter a label for your font in the Font Name field.
- Click Choose font files and select one or more font files, then click Next.
- Click the Font Style 1 dropdown menu and select the style your font file is using. Each style must use a separate font file.
- To add additional font styles, click + Add another font style, then add your font styles. Each uploaded font file must have at least one associated style.
- When you've added all applicable font styles, click Done.
Edit custom fonts
Once you've uploaded a custom font in the theme editor, you can upload additional fonts, customize existing fonts with additional font styles, or delete fonts.
-
Navigate to your content:
- Website Pages: In your HubSpot account, navigate to Content > Website Pages.
- Landing Pages: In your HubSpot account, navigate to Content > Landing Pages.
- Blog: In your HubSpot account, navigate to Content > Blog.
- Click the name of your content.
- In the content editor, click the Edit menu and select Theme: [Name of Theme].
- In the left sidebar menu, click to expand the Fonts section.
- Click a font dropdown menu and select Manage custom fonts.
- To add a new font, click Add a custom font in the dialog box.
- To edit a font:
- In the dialog box, click the Actions dropdown menu next to the font and select Edit.
- To change the name of the font, click Edit next to the font name, then enter a new font name.
- To add additional fonts styles, click Add another font style, then click the Font style dropdown menu and select a style. Click Upload, then upload a font file.
- To delete a font style, click the delete icon next to the font style. You cannot delete a font style if there are no other font styles listed.
- Click Save.
- To delete a font, click the Actions dropdown menu in the dialog box and select Delete.
Please note: deleting a font removes it from all dropdown menus, but the font files will remain in the files tool until deleted there.
- When you're finished editing your fonts, click Done.
Use custom fonts in stylesheets
As an alternative to using standard web fonts or using a font library like Google Fonts, you can host font files in the files tool, then reference them in your stylesheet.
Please note: custom fonts are only available in accounts with access to the design manager and need to be applied with CSS. Adding a custom font will not add the font to styling dropdown menus in the content editor.
To use a font in content, upload the font's files to the files tool. It's recommended to upload at least .woff, .ttf, & .eot versions of the font to ensure your font loads on all browsers. You can use the Expert mode on Font Squirrel's converter tool to generate additional file formats.
- In your HubSpot account, navigate to Library > Files.
- Click Upload files.
- On your computer's hard drive, select the font files, then click Open.
- Click the name of an uploaded font file.
- In the right panel, click Copy URL to copy the URL where the file is hosted. You will need the URL for the font in each file format.
Use a custom font in a stylesheet
Once you've added a custom font to the files tool, you can reference it in a stylesheet. Each font style (italics, bold, etc.) will require a separate @font-face rule. Learn more about working with stylesheets in HubSpot.
- In your HubSpot account, navigate to Content > Design Manager.
- In the finder, open the stylesheet used for your content.
- For each font style:
- At the top of the stylesheet, paste the following code:
@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 Your Font Name with the name of the font.
- Replace your_font_file.xxx? with the URL from the files tool. Repeat for each file format.
- Create CSS rules with the font-family property to apply the custom font.
- In the top right, click Update or Publish to take your changes live.
Use a custom font in a custom coded email template
Custom fonts aren't supported in most popular email clients. To ensure a consistent experience for your readers, using default web fonts in emails is recommended. However, if you’d like to add a custom font to a custom coded email template, you can do so once you’ve added the custom font to the files tool.
- In your HubSpot account, navigate to Content > Design Manager.
- In the finder, open the custom coded email template.
- For each font style:
- In the <head> section of the template, paste this code between the <style>....</style> tags:
@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 Your Font Name with the name of the font.
- Replace your_font_file.xxx? with the URL from the files tool. Repeat for each file format.
- In the code of the email body, add the custom font in inline styling.
- In the top right, click Update or Publish to take your changes live.
Use a custom font in a CTA
After adding a custom font to your theme, you can use it with CTAs:
- In your HubSpot account, navigate to Marketing > CTAs.
- In the top left, click the dropdown menu and select CTAs
- Hover over a CTA, then click Actions > Edit.
- In the left panel of the CTA editor, click the Design tab.
- Click the Styles section to expand.
- Click the Primary Font dropdown menu and select your custom font.
- Continue creating your CTA.
Use a custom font in a CTA (legacy)
Similar to CTAs, after uploading a custom form file, you can use it with legacy CTAs:
- In your HubSpot account, navigate to Marketing > CTAs.
- Hover over a CTA, then click Actions > Edit.
- In the right panel, click Advanced options.
- In the text box, paste this code:
font-family: 'Your Font Name';
- Replace Your Font Name with the name of the font.
- In the bottom right, click Next. Then, click Save.
Use a custom font in a custom module
Once you've added a custom font to the files tool, you can use it in custom blog or page modules. Learn how to add a custom font to a custom coded email template.
- In your HubSpot account, navigate to Content > Design Manager.
- In the finder, open the custom module.
- In the module.css section, paste the following code:
@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 Your Font Name with the name of the font.
- Replace your_font_file.xxx? with the URL from the files tool. Repeat for each file format.
- Create CSS rules with the font-family property to apply the custom font.
- In the top right, click Publish changes to take your changes live.
