Neambo homepage
Contact UsMarketplace

How to use external fonts

Important note!

HubSpot has since introduced a native method for using custom fonts in themes (brand fonts). You can learn more about it here. The method described below predates this feature. Feel free to use either approach, but we recommend trying the native method first.

To use other fonts than the ones available in the library, please follow the steps below.

1Prepare font files

First, make sure your font files are in a web-friendly format — WOFF and WOFF2. You can use an online service like https://cloudconvert.com/ttf-to-woff2 to convert your font files. Please make sure you have the rights to do so. Check with your fonts provider and the license that comes with your fonts.

If your font provider offers the font files in web-friendly formats (e.g., WOFF, WOFF2), you can skip this step. If they provide a URL to a CSS file hosted on their platform, you can jump directly to using their provided CSS.

We recommend having a normal font variant (it may be named Light, Regular, Normal, Medium, Book, etc.) and a bold version for the bold text. You can have two versions (normal and bold) for all three types of text in Act3: text, headings, and UI text. Please check our Theme settings section to understand these three types of text.

2Upload font files

Once you have all your font files in the correct format, you can upload them to your HubSpot account using the File manager. Learn how to upload files in HubSpot.

3Define fonts in CSS

Assuming you already have an Act3 child theme, go to your parent theme, right-click the _fonts.css file, and select Clone to child theme. This copies the file into your child theme where you can edit it.

Add your font definitions just below the existing code in the file. If your font vendor provided a CSS link instead, you can skip this step and jump to the import method below.

@font-face {
  font-family: 'Font name';
  src: url('path_to_font_file.woff2') format('woff2'),
       url('path_to_font_file.woff') format('woff');
  font-weight: normal;
  font-style: normal; 
}

Replace the file paths with your font files from the File manager — the WOFF2 path goes on the WOFF2 line, and the WOFF path on the WOFF line:

Add the font name:

The font-style remains normal everywhere, but the font-weight value will be either normal or bold, depending on your font variant.

Repeat these steps for all your fonts. Here is a full example:

/* --- Sofia Soft Pro --- */

/* Regular */

@font-face {
  font-family: 'Sofia Soft Pro';
  src: url('https://example/sofia-soft-pro-regular.woff2') format('woff2'),
       url('https://example/sofia-soft-pro-regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* Bold */

@font-face {
  font-family: 'Sofia Soft Pro';
  src: url('https://example/sofia-soft-pro-bold.woff2') format('woff2'),
       url('https://example/sofia-soft-pro-bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

Notice that this font uses the same name, but with different file paths and font-weight values.

You can repeat and adjust this code for additional fonts, like a heading or UI font. Keep in mind that each font file adds to your page weight.

Here is an example defining two fonts — one with both a normal and bold variant and another with just the bold variant:

/* --- Text: Sofia Soft Pro --- */

/* Regular */

@font-face {
  font-family: 'Sofia Soft Pro';
  src: url('https://example/sofia-soft-pro-regular.woff2') format('woff2'),
       url('https://example/sofia-soft-pro-regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* Bold */

@font-face {
  font-family: 'Sofia Soft Pro';
  src: url('https://example/sofia-soft-pro-bold.woff2') format('woff2'),
       url('https://example/sofia-soft-pro-bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

/* --- Headings: Avenir Next --- */

@font-face {
  font-family: 'Avenir Next';
  src: url('https://example/avenir-next-bold.woff2') format('woff2'),
       url('https://example/avenir-next-bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

Other methods

If your font vendor provides a CSS file URL, you can either import it at the bottom of your css/_fonts.css file:

@import url('https://fonts.someprovider.com/path-to-file.css');

Or add it as a <link> tag in Settings › Content › Pages › Templates › Site header HTML:

<link rel="stylesheet" href="https://fonts.someprovider.com/path-to-file.css">

The second method is recommended for page speed.

4Set font variables

Now that your font files are available on your website, assign them to the text elements in your theme using the variables in your css/_fonts.css file. In most cases, you only need to update the font name.

Check the Theme settings section to understand the three types of text in Act3.

5Disable the fonts in the Theme settings

Go to Theme settings › Typography › Fonts, check the Use external fonts box, and publish your changes.