How Do I Add Custom Fonts to the Theme? | HubSpot Theme Docs

If the fonts you want to use are available at https://fonts.google.com/, you can set them as the font for your theme through the theme settings.

To add a custom font not available in the font dropdown please refer to HubSpot’s knowledgebase article on how to add custom fonts to a theme ->

Typography Integration Guide

When implementing custom fonts in your HubSpot theme, you’ll want to consider how they integrate with your overall design system and page editor experience. Once you’ve added Google Fonts through theme settings or uploaded custom fonts following HubSpot’s documentation, these fonts become available throughout your drag-and-drop page editor modules.

Your custom fonts will automatically populate in the font selection dropdowns within rich text modules, heading modules, and any custom modules that include font styling options. This ensures content editors can maintain brand consistency without needing technical knowledge of CSS or font implementation.

Best practices for custom font implementation:

Keep in mind that custom fonts affect page load speed, so limit yourself to 2-3 font families maximum. When selecting Google Fonts, choose only the font weights and styles you actually use on your site. For example, if your design only requires regular and bold weights, don’t load light, medium, and extra-bold variants.

Test your font choices across different devices and browsers, particularly on mobile where readability is crucial. Some decorative fonts that work well for headings on desktop may become illegible on smaller screens. You can use HubSpot’s device preview feature in the page editor to verify how your custom fonts render across breakpoints.

If you’re working with a brand that requires specific licensed fonts not available through Google Fonts, ensure you have proper licensing for web use before implementing them. Upload these fonts following HubSpot’s custom font guidelines, and consider providing fallback fonts that closely match your custom typefaces for optimal loading performance.

Remember that font changes made through theme settings will affect all pages using that theme, while module-level font selections override theme defaults for specific content blocks.