Follow these instructions to set up custom fonts within your Sprocket Rocket Theme
To use custom fonts, head to your theme settings. Enabled Custom Font, this will hide the font fields from theme settings. Font weight, 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. From there search for sr-base.css and click on it.
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 include EOT, TTF, WOFF, and WOFF2 . Repeat for multiple custom fonts.
@font-face {
font-family: "YourFontName";
src: url("http://domain.com/YourFontName.eot");
src:
url("http://domain.com/YourFontName.woff") format("woff"),
url("http://domain.com/YourFontName.otf") format("opentype"),
url("http://domain.com/YourFontName.svg#filename") format("svg");
}
Next press ctrl/cmd+f to search the file and search for Custom fonts.
From here add YourFontName to the font-family rule to the body, h1, h2, h3, etc. If you have multiple custom fonts, you can use any of theme for each style.
Once this is done your fonts should be displayed on your website.