How to use external fonts

If you want to use other fonts than what's included, please follow the steps:

1. Prepare 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/or the license that comes with your fonts.

Act3 - Convert fonts example

Some font providers will already offer the font files in these two web-friendly formats, so you may skip this step if you already have them. Other font providers will offer you an URL to a CSS file hosted on their platform, in which case you can skip all these steps and start here.

We recommend having a normal font variant (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.

2. Upload 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

Act3 - Uploaded font files example

3. Define your fonts in the CSS

Assuming you have already created a child theme of Act3, you need to create a css folder inside your child theme, and a file inside this folder, named _fonts.css, so the path would be: your-child-theme/css/_fonts.css:

Act3 - Child theme - CSS - Fonts

You can then copy the content from the css/_fonts.css file from the original Act3 theme:

Act3 - Copy code from the css/_fonts.css file

... and paste it into your newly created CSS file, at the same location, in your child theme:

Act3 child theme - code pasted in the css/_fonts.css file

You can now define your fonts with a code like this, just below the code you've just added. If your font vendor provided you with a CSS link, you can skip this and scroll here to see how you can import it.

@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 path to your font files from the File manager, like this (make sure to add the WOFF2 file path to the WOFF2 line, and the WOFF file path to the WOFF line):

Act3 - File manager - Copy font path

Act3 - Replace font path in the CSS

Add the font name:

Act3 - Replace font name in the CSS

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 we defined this font with the same name, but only the paths to the files and the font-weight values are different.

You can repeat and adjust this code if you have more fonts, like a special font for the headings, or UI text, but please keep in mind that the more font files you have, the slower the page will be. 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;
}

If your font vendor provided you with an URL to a CSS file hosted on their platform, you can include it in your css/_fonts.css file, at the bottom of the code like this:

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

4. Set font variables

Now that your font files are available with your website, you need to assign them to the various text elements in your theme, using the variables in your css/_fonts.css file. You may only need to change the font name. Please check our Theme settings section to understand the three types of text in Act3.

Act3 - CSS font variables

5. Disable the fonts in the Theme settings

The last thing to do now is to disable the fonts from the Theme settings, so these custom fonts and variables are used instead. Go to your Theme settings > Typography > Fonts and check the Use external fonts box, then publish your changes:

Act3 - Theme settings - Typography - Use external fonts