Easy Tech TutsHow to Add Fonts to Your HubSpot Website Template Easily 2026
By Impran M N
Matching your website's typography to your brand often means going beyond HubSpot's default font list, and the platform supports both Google Fonts and custom uploaded files. This guide covers applying fonts through the Theme Settings panel and, for fully custom typefaces, uploading files and writing your own CSS rules. It ends with checking font-display settings so your page still loads quickly.
01Open your Theme editor
Go to Website Pages in HubSpot and launch the Theme Customizer for your active site.
02Apply a standard or Google Font
Use the Theme Settings panel to select a web-safe or Google Font across your layout without any extra files.
03Upload a custom font file
Open the Files app and upload your .woff2 font files to generate a secure asset URL.
04Write custom CSS rules
Edit your theme's override stylesheet to add an @font-face rule pointing to your uploaded font file.
05Map fonts to your text elements
Apply your new font family to headers, body copy, and call-to-action modules as needed.
06Preview and publish
Check the responsive preview across devices, then publish to update typography site-wide.
Frequently asked questions
Can I upload my own font files to HubSpot?
Yes, you can upload .woff2 or similar files through the Files app and reference them in your theme's CSS.
Do I need to write CSS to use Google Fonts?
No, Google Fonts can typically be applied directly through the Theme Settings dropdown without custom CSS.
Why should I use .woff2 font files?
The .woff2 format is optimized for faster load times and broad browser support compared to older formats.
Will custom fonts slow down my site?
They can if not optimized, so setting font-display swap and using compressed formats helps prevent layout shifts and slow loads.
Watch the full walkthrough
The same steps, demonstrated on screen from start to finish.
