I will lead you through the steps to add fonts to HubSpot in this article. As a web developer who regularly utilizes HubSpot, I recognize the significance of personalizing the appearance of your content to align with your brand’s unique character and design. Incorporating your own fonts can be an effective method to achieve this personalized touch. Therefore, let’s begin!
Step 1: Selecting Your Fonts
The first step in adding fonts to HubSpot is selecting the fonts you want to use. Consider your brand’s identity and choose fonts that align with it. There are numerous websites where you can find free and paid fonts, such as Google Fonts, Adobe Fonts, and Font Squirrel.
Step 2: Downloading the Font Files
Once you’ve chosen your desired fonts, you’ll need to download the font files. Most fonts come in either TrueType (.ttf) or OpenType (.otf) format. Make sure to download both regular and any additional font styles (bold, italic, etc.) that you want to use.
Step 3: Uploading the Font Files to HubSpot
Now that you have the font files ready, it’s time to upload them to HubSpot. Open your HubSpot account and navigate to the Design Manager. From there, click on the “Files” tab and select “Upload Files” to upload the font files you just downloaded.
Step 4: Creating a Custom CSS File
Next, we need to create a custom CSS file to apply the fonts to your HubSpot content. In the Design Manager, go to the “File” tab and click on “Create a New File.” Select “CSS” as the file type and give it a meaningful name.
Step 5: Writing the CSS Code
Now it’s time to write the CSS code that will link your uploaded font files to your HubSpot pages. Open the CSS file you created and add the following code:
@font-face {
font-family: 'YourFontName';
src: url('your-font-file.ttf') format('truetype');
}
Replace ‘YourFontName’ with the name of the font you want to use (e.g., ‘Roboto’) and ‘your-font-file.ttf’ with the name of the font file you uploaded.
Step 6: Applying the Fonts to Your HubSpot Pages
To apply the fonts to your HubSpot pages, you’ll need to edit the templates or modules you want to customize. In the Design Manager, navigate to the template or module you want to modify and click on it to open the editor.
Within the editor, locate the area where you want to use your custom font, whether it’s a heading, body text, or other element. Select the text, and in the editor toolbar, you’ll find an option to apply a custom font. Choose the font you uploaded from the dropdown menu, and voila! Your custom font is now applied to your HubSpot content.
Conclusion
Adding fonts to HubSpot allows you to infuse your brand’s personality into your content. By following these steps, you can easily upload and apply your own fonts, giving your HubSpot pages a unique and professional look. Remember to choose fonts that align with your brand’s identity and use them strategically throughout your content. With custom fonts, you can create a cohesive and engaging experience for your website visitors.