website logo
Login
⌘K
Sprocket Rocket Help Center
First Steps
Setup
HubSpot Permissions
Installing Sprocket Rocket
Adding a Custom Installation
Page Builder
Creating a Page
Saving a Layout
Using Custom Modules
Custom Theme Previews
Templates
Website Templates
Landing Page Templates
System Templates
Blog Templates
Modules
Installing Modules
Updating Modules
Creating Global Modules
Navigation
Hero
Footer
Columns
Tabs
Offers
Cards
Bling
Elements
Theme
Theme Styles
Global Site Header and Footer
Custom Fonts
Creating a child theme
Custom CSS
Users
Adding Users
FAQ
How can I change my page theme/template?
Can I upgrade my Sprocket Rocket Pro Theme to the new version?
Why are some modules on my Sprocket Rocket App locked?
How to customize a column size
What's the difference between Sprocket Rocket Pro and Sprocket Rocket Theme?
Do I need a HubSpot account?
jQuery version security issue
How to add users to your HubSpot Portal
Misc
Branding Setup
Marketplace Theme
Docs powered by archbee 

Custom Fonts

SR App: Custom Fonts

Follow these instructions to set up custom fonts within your Sprocket Rocket Theme

To use custom fonts, head to your theme settings. Enable Custom Font, this will hide the font fields from theme settings. Size, line height are still editable from within your theme settings.

Document image

Next head to the design manager, The Design Manager can be found by navigating to Marketing > Files and Templates > Design Tools in the top navigation bar.

 

Find the SR folder and click on it. Then right click the SR folder and add a new folder and name it fonts

Document image

Right click the fonts folder and click Upload file in "fonts" and upload all your fonts files

Document image

In this example we are using Adobe Text Pro and we have 3 different fonts we want to use, so it should look something likes this.

Document image

Then search for _fonts.css and click on it.c

Add the follow code to the top off the CSS file and replace with your fonts details. To ensure that your fonts works across all old and new browsers WOFF, and WOFF2. 

If the example below you can see we repeated font-family: "Adobe Text Pro" for all of them, but the font-weight and font-style are different. 

replace AdobeTextPro-Regular.woff2 and AdobeTextPro-Regular.woff with the name of your font files

CSS
|

From here add your font name to the font-family rule to the body, h1, h2, h3, etc. If you have multiple custom fonts, you can use any of them for each style.

CSS
|
Updated 30 Nov 2022
Did this page help you?
Yes
No
UP NEXT
Creating a child theme
Docs powered by archbee 
TABLE OF CONTENTS
SR App: Custom Fonts