Custom fonts

Use WOFF2 when it is available. Add WOFF only when you need the older fallback. Convert the source files first if your font provider did not supply either web format.

You add the font files and CSS in HubSpot's design tools. The Module Builder edits module code only and can't upload files to the theme.

Enable the custom font setting

Open the Sprocket Rocket theme settings in HubSpot, go to Typography, and turn on Custom Font. The font pickers (Primary Font and each style's font, such as H1 Font) are hidden, and font weight settings appear for the headings, display, and other text styles instead. Sizes, line heights, and the other typography settings stay available.

Add the font files

1. In HubSpot's design tools, open the installation's theme folder.
2. Create a fonts folder at the theme root if one does not exist.
3. Upload each required .woff2 and .woff file into that folder.

Register each weight and style

The theme loads css/_fonts.css only while Custom Font is on. Open it and add one @font-face rule for each file combination, above the element rules already in the file. The family name must be identical across the rules. Match font-weight and font-style to the actual file.

@font-face {
	font-family: "Brand Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src:
		url("{{ get_asset_url('../fonts/brand-sans-regular.woff2') }}") format("woff2"),
		url("{{ get_asset_url('../fonts/brand-sans-regular.woff') }}") format("woff");
}

Apply the family

The rest of css/_fonts.css already lists the elements that use the custom font, each with an empty font-family: "";. They cover body text, headings, display text, lead paragraphs, blockquotes, buttons, and navigation links. Replace each empty value with your family and a fallback:

body {
	font-family: "Brand Sans", sans-serif;
}

Before you update the theme

css/_fonts.css is a managed theme file. If an update for it appears in Files, check the file's diff first, because applying the update replaces your rules. Create a backup before you change it.

Only upload font files your organization is licensed to use on the web. Keep the number of files and weights small because each one adds page weight. Return to typography settings after registering the family, then test a page before publishing.