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.
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
Right click the fonts folder and click Upload file in "fonts" and upload all your fonts files
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.
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
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.
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