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 bodyh1h2h3, etc. If you have multiple custom fonts, you can use any of them for each style.

Notice how the body and h1 have the same font-family, but the h1 font-weight is set to 600. This matches what we set in our @font-face for the bold font file. Also the h6 has font-style: italic so this refences the Italic font we set

Document image



Updated 01 Jun 2022
Did this page help you?
Yes
No