We understand that your theme may have some custom fonts that you use to make your site match your aesthetic, why not bring them into Shogun? Bringing your custom fonts from your theme is super easy, they can be used on your elements to make your site look great.
We offer Google Fonts on our elements to offer you a library of fonts to choose from, as well as any other fonts that you wish to add into the Shogun dashboard.
Guides on adding fonts to themes
How to add your font to Shogun
Once the fonts are in your theme, you can add the names of them into the settings section inside Shogun.
Settings > Fonts (at the bottom) > Add the font name
The font name is case sensitive, spelling sensitive, and syntax sensitive. It should be an exact match to how the
font-family is written in the font's CSS. Some fonts will have single quotations around them (i.e. 'font name'); these should be included in the font name field.
Note: Single quotations should be used for any multi-word font name; double quotes are not recommended and may not render correctly.
Once a Custom Font has been added to your Shogun settings, it will appear as an option in the element's font menu.
Adding your Adobe Typekit fonts to Shogun
Shogun allows you to integrate your Typekit fonts right into your pages. Simply enable the integration in your Shogun settings, enter your kit_id (Project ID) and you're good to go!
To find your Project ID, you first need to create an Adobe account to get started, visit https://fonts.adobe.com/ to get started. Once this is done, please follow their guides on how to create a web project with your selected fonts. To get your Project ID, please navigate to the web project of choice.
Once your kit_id (Project ID) has been inserted into your Shogun settings, you will need to integrate these into the Shogun settings, you can find the
font-family in the usage section.
In the example above, you would insert banshee-std into the Shogun settings for it to appear in your Text element dropdown menu.
💡 Font weights are not currently supported by Typekit fonts - custom CSS will need to be applied to the element for correct displaying of font weights.
My font is not showing
Check the integration with your theme, the font will need to be integrated with the main CSS of your theme using the
@font-face selector. If you are having trouble with this, we would recommend getting into contact with the developer of your theme, or with Shopify support directly - Shogun is unable to insert fonts into your theme.