All Collections
FAQ
Advanced
How do I add my fonts to Shogun's editor?
How do I add my fonts to Shogun's editor?

Add more fonts in Shogun, by entering the fonts that you have installed in your website/ theme into Settings.

Updated over a week ago

We understand that your theme may have some custom fonts that you use for your store's branding, so 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 Shogun's style options and is ready to use! This guide covers how to add any additional custom fonts from your store's theme or Typekit into Shogun. (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 their names to 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 in 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.

Many fonts found on Adobe Fonts are only available to be added to a Typekit once you are on a Creative Cloud license - if you are not seeing the prompt to add the font to your WebProject that would be due to the fact that you will need to pay to use it.

💡 Font weights are not currently supported by Typekit fonts - custom CSS will need to be applied to the element for the correct displaying of font weights.


Related articles:

Did this answer your question?