How to add custom fonts to the theme?

Note: This article is for adding custom font family, If you're using Google fonts, checkout this article

▶How to change the font family?

If you’re planning to add custom fonts to your theme but don’t want to deal with code-level changes, this guide is for you. You can now upload fonts directly to your Brand settings in HubSpot and select them straight from the theme editor.

Step 1: Gather all your fonts

Before you begin, make sure you have all the font files you want to use ready and organized. This includes the correct formats (such as .woff or .woff2) and all required font weights and styles. Having everything prepared upfront will make the setup smooth once you start selecting fonts in HubSpot.

You can use an online converter like Font Squirrel to convert font files to the formats needed.

Step 2: In your HubSpot portal, Go to Content > Brands

Step 3: Under Fonts choose Add

Step 4: Under Custom Fonts section, click Add a custom font

Step 5: Upload your font files and give a proper name.

Step 6: Select proper weight style for you font. (Thin, Regular, Bold, Extra Bold)

Your custom fonts should like below. You don't have to select fonts just just upload theme here. We'll select the fonts under the theme options.

Step 7: Open your theme options

You can open theme options by going to any of your blog post or a page then Edit and select Theme: Awwal Blog

Step 8: Under typography tab, under the font dropdown, search the name of the font you just uploaded.

Select your custom font in all your Headings H1 to H6 and Body text

Step 9: Publish theme and you're good to go!

You have successfully added custom fonts to your theme.