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, there can be used on the Text element to make your text look great.
Please note: custom fonts will not be available on elements other than the Text element at the moment.
We offer Google Fonts on some of our other elements, such as the Heading element, Button element, and Accordion element - your custom fonts won't be available here at the moment.
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.
Once a Custom Font has been added to your Shogun settings, it will appear as an option in the Text 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.
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.