Adding Custom Fonts
Add your brands custom fonts to use in the POWER HubSpot theme
Custom fonts typically don't add additional load times to your website pages unless you are adding more than the two fonts used in the standard theme.
Adding more fonts and more weights add resources that have to be loaded when a user visits your pages.
Limit the fonts you add to your child.css to the specific fonts and weights you need for your design.
POWER theme is designed to use a Base font and Accent font, which can be replaced with a custom font, and it is best to avoid adding too many additional fonts and removing fonts or weights you aren't using.
The theme accesses the Google Fonts library (browse available fonts) by default. If you are using Adobe Fonts (formerly Typekit), another online font service, or if you have licensed font files, these can be added to your child theme to override the theme settings.
You'll need to know the location of your fonts (either the font library URL or the font file URL from HubSpot files for each font) and which font will be the base font and which will be the accent font.
If you are not a developer or unable to make the updates on your own, please submit a ticket and we'll gladly help with the setup.
When child themes were first released, HubSpot included the fields.json file in the child theme.
In v23 we updated the theme to use Advanced Font Settings if your child theme includes the fields.json file those settings aren't being updated properly from the parent theme.
Please submit a ticket and we'll work with you to resolve the issue.
We are working on a solution within the theme to make this easier to control that will be included in an upcoming release.
There is a workaround solution we have created to allow your site to render the fonts without the Google API.
This requires configuring the Google Fonts as a Custom Font (following the instructions on this page) and modifying the Base and Accent font in the Theme Settings to default to Helvetica.
Please submit a ticket and we'll be happy to complete the custom font setup for you.
⚠️ To set up custom fonts, your website pages must be created with templates from a child theme. You will need to complete the child theme setup first.
POWER theme uses the Google font library, if you own the license to a different font or are using Typekit you can follow these instructions to update.
⚠️ Setting up custom fonts requires the use of Design Tools and some familiarity with code.
This documentation is designed to assist developers and those with code experience in properly setting up fonts for compatibility with the theme. If that's not you, please submit a ticket and we will gladly assist with the setup!
Add a Custom Font to Your HubSpot Website Theme
Font File Prep
You will need to gather the font files and identify the font you will use for the Base font and the Accent font.
If you will use more than two fonts (including weights/variations), it is only recommended that you load the specific font families needed (additional font files increase page load times).
There are several font file types for use with websites that have changed over time with changes to browsers and devices.
We recommend WOFF and WOFF2 as the most practical level of browser support, then adding browser-specific file types as needed.
Depending on your user's device/browser data you may need to load alternate versions of the file to provide support for older browsers. You can use an online converter like Font Squirrel to convert font files to the formats needed.
- True Type Font (TTF) - most common font type for Mac and Windows
- Open Type Font (OTF) - scalable version of true type used by most platforms
- Web Open Font Format (WOFF) - developed specifically for web pages, it is essentially a compressed version of TTF or OTF with additional metadata
- Web Open Font Format 2 (WOFF2) - similar to WOFF with better compression (smaller file sizes)
- Embedded Open Type Font (EOT) - is a compact form of OTF that is embedded on web pages and designed by Microsoft and is only supported by IE 6-11 (retired and not-preferred)
- Scalable Vector Graphics (SVG) - most commonly used to display glyphs
For more information about the best font files for browser support, including the deepest possible browser support, we recommend reading this article: How to use @font-face in CSS.
To check browser compatibility based on your user data, you can type any of these file formats into caniuse.com for a more detailed view.
Here is an example for WOFF from Can I Use (current as of 9 June 2022):
Once you have determined the correct file types, you will need to load them to the HubSpot Files directory.
Marketing → Files and Templates → Files
- Create a folder named "fonts"
- Upload the necessary font files
Updating the child.css to include custom font files
To add a custom font to your website theme using these instructions requires v24 or later.
Marketing → Files and Templates → Design Tools
- In the left sidebar, navigate to POWER X YOUR COMPANY → Child.css
The fonts will be added directly to your child.css file, it may have a different name depending on how the files were named when the child theme was created.
If you have not made any previous revisions to your child.css file, you will need to add the include statement at the top:
Next, copy this code and add it to your child.css file:
You can modify the code for your font name, file location, file type(s), etc. accordingly.
You can copy this code and repeat these steps for each font you are adding.
Importing From Typekit
For Typekit, you'll only need to add the @import for the Typekit URL provided.
Replacing Default Theme Fonts
Once all of the fonts have been loaded, you will need to update the code for the base and accent fonts.
Just below the @font-face setup, you can add this code to set the Base Font Family (ff-base) and Accent Font Family (ff-accent).
This is where you can replace the theme settings with the local name for your font.
Overwriting CSS Classes
We highly recommend doing any class overwrites in the child.css file so that any overwrites to the child theme are easier to find/identify in a single location.
As noted above, if you have not added anything to the child.css file previously, make sure to add the include statement for _pwr-style-settings.css at the top: