how to add fonts to hubspot

How to Add Fonts to HubSpot

Adding fonts to HubSpot is a process that varies depending on the type of font you're looking to add (default, web, or custom fonts) and the content you're planning to use them in (website pages, blogs, emails, etc.). HubSpot supports a variety of methods for incorporating fonts into your content, including using default fonts, integrating Google Fonts, and uploading custom fonts.

Streamline your HubSpot workflow and save time on repetitive tasks with Bardeen automations. Enhance your productivity today!

Using Default Fonts

Default fonts are readily available in HubSpot's rich text editor and can be used across different types of content without any additional setup. To use a default font:

1. Navigate to the content you wish to edit (Website Pages, Landing Pages, Blog, Knowledge Base, or Email).
2. Click 'Edit' on the content piece.
3. In the content editor, select the text you want to modify.
4. Choose your desired font from the 'Font' dropdown menu in the rich text toolbar.

Integrating Google Fonts

For a broader selection of fonts, you can integrate Google Fonts into your HubSpot content. This method involves copying the font's import code from Google Fonts and applying it through CSS.

1. Visit fonts.google.com and search for the font you want to use.
2. Click '+ Select this style' for each style you want to import.
3. In the right panel, select '@import' in the 'Use on the web' section and copy the code provided.
4. Navigate to 'Marketing' > 'Files and Templates' > 'Design Tools' in your HubSpot account.
5. Open the stylesheet used for your content and paste the @import code at the beginning of the file.
6. Add the CSS rules for the font to the appropriate selectors in your stylesheet.
7. Publish your changes.

This method can be used for stylesheets, custom coded email templates, CTAs (legacy), forms, and custom modules, although it's important to note that Google Fonts are not supported in email templates due to limited client compatibility.

Adding Custom Fonts

If you have specific brand fonts that are not available through Google Fonts, you can upload custom font files directly to HubSpot for use in your themes or stylesheets.

Use Custom Fonts in Themes

1. Navigate to the content you want to edit and select 'Edit'.
2. In the content editor, go to 'Edit' menu and choose 'Theme: [Name of Theme]'.
3. Click a font dropdown menu and select 'Upload a custom font'.
4. Enter a label for your font, choose the font files, and specify the font styles.
5. Once all styles are added, click 'Done'.

You can manage your uploaded fonts by editing the theme settings, where you can add more fonts, customize existing ones, or delete them.

Use Custom Fonts in Stylesheets

To use custom fonts in your content through CSS, you'll first need to upload the font files to HubSpot's file manager.

1. Go to 'Marketing' > 'Files and Templates' > 'Files' and upload your font files.
2. Copy the URL of each uploaded font file.
3. Navigate to 'Marketing' > 'Files and Templates' > 'Design Tools' and open your stylesheet.
4. Add an @font-face rule for each font style at the top of your stylesheet, specifying the font family, source URL, and format.
5. Apply the custom font using CSS rules.
6. Publish your changes.

By following these steps, you can enhance your HubSpot content with a wide range of fonts, from default and Google Fonts to unique custom fonts, ensuring your branding remains consistent across all platforms.

Discover how to integrate HubSpot with Salesforce, enrich multi-channel outreach with LinkedIn, and sync HubSpot and Slack for instant alerts to boost your marketing and sales efforts.