We understand that your theme may have some custom fonts that you use for your store's branding, why not bring them into Shogun? Bringing custom fonts that already exist in your theme is super easy, they can be used on your elements to make your site look great.
NOTE: The Google Fonts library is already built into Page Builder's style options and ready-to-use! This guide covers how to add any additional custom fonts from your store's theme or Typekit into Page Builder. (If you're unsure how to add custom fonts to your theme, we recommend contacting your theme developer for assistance.)
How to add your custom 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 element's font 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 - Shogun is unable to insert fonts into your theme.
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.
Related articles: