Skip to content
maka-img_mm_marketplace
maka marketplace

Discover Products to help you POWER up with CMS Hub

maka-img_mm_power-pro
Power Pro Theme

Check out the POWER demo and see all the latest features

maka-img_mm_performance
Performance

POWER is optimized to perform, review the results

maka-img_mm_customer-showcase
Customer Showcase

See how our customers used the POWER Theme

POWER Pro V35 released on December 21st 2023 – Read Changelog

maka-img_mm_documentation_3
Getting Started

Follow our guide to save time and avoid missing a step

maka-img_mm_module-library
Module Library

From page speed impact to set up instructions, you'll find it all

maka-img_mm_video-tutorials
Video tutorials

Find all POWER videos in the same spot for quick answers

maka-mm_faq-2
FAQs

Have questions?
Search for answers

Experiencing an issue with POWER? Submit a support ticket here

maka-img_mm_about-us
About us

“Would I rather be feared or loved? Easy. Both. I want people to be afraid of how much they love me.”
– Michael Scott, not us

maka-img_mm_blog
Blog

This is mostly a demo right now. We are working on some really cool things around the office.

maka-img_mm_career
Career

Quite possibly the most fun you will have at work, ever. Did we mention how cool we are?

Having issues with POWER?
SUBMIT A SUPPORT TICKET


Schedule a Q&A or Demo
PREPURCHASE CONSULTATION


Looking for Custom Development?
REQUEST A QUOTE


Other questions?
CONTACT US / CHAT BOT

Adding Custom Fonts

Add your brands custom fonts to use in the POWER HubSpot theme

Aa-font-icon
CUSTOM FONTS

HubSpot themes access Google Fonts, but if you use a custom or purchased brand font it is still possible to use these fonts on your website.

add-custom-font-in-hubspot

Page Speed Impact

LOW

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.

MEDIUM

Adding more fonts and more weights add resources that have to be loaded when a user visits your pages.

TIPS

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.

FAQ

My font needs to be GDPR compliant and not use the Google API, how does this work?

The theme automatically converts the selected fonts to local font files and removes the call to the Google API

⚠️ 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.

Setup Instructions

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.

@font-face {
  font-family: 'YourFontName';
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff');
}

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):

can-i-use-woff

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.

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.

@font-face {
    font-family: 'what-to-call-the-font';
    src: local('font-name-for-local-font-files'), 
         url('https://cdn2.hubspot.net/hubfs/YOUR_HUBSPOT_ID/internal_font_name.woff') format('woff'),
         url('https://cdn2.hubspot.net/hubfs/YOUR_HUBSPOT_ID/internal_font_name.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

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.

@import url("https://use.typekit.net/yourcodehere.css");

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).

:root {
    --ff-base: what-to-call-the-font, sans-serif !important;
    --ff-accent: what-to-call-the-font, sans-serif !important;
}

This is where you can replace the theme settings with the local name for your font.

Once you have redefined the font variables, you will need to update the Theme Settings for Fonts to deactivate the defaults.

Screenshot 2023-05-03 at 12.01.56 PM

Overwriting CSS Classes

Any class overwrites should be done in the child.css file so that any overwrites to the child theme have the highest priority.

When a child theme is created by HubSpot, this priority is not set automatically.

Here is an example of the base.html file when the child theme is initially created (see highlighted line 21):

child-theme-base-html-line-21-child-css

The code in the base.html on line 21 needs to be replaced with the following:

{% set overwrite_child_css_path = '../../child.css' %}

Next Steps

If your site's primary language is not English, or you'll be creating pages in multiple languages, you'll want to review the Multi-language settings to ensure the language switcher functions properly. Otherwise, jump on over to learn about forms.

Next up:

NEVER MISS A POWER UPDATE

We are continuously improving our modules and updating our documentation. Stay in the loop.