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 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; Shogun will automatically populate the fonts you have added to the project already to the text element toolbar and font declaration fields in app!

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.

Implementing custom font weights in Adobe Fonts

From here, you could choose to include the font only for specific rules, and this CSS is added to the Typekit will be presented in the project.

In this example I want to load 'adobe-caslon-pro' but only for bold italic texts:

@font-face { 
 font-family: "adobe-caslon-pro";
 src: ...;
 font-display: auto;
 font-style: italic;
 font-weight: 700;
 font-stretch: normal;
 } 

@font-face { 
 font-family: "adobe-caslon-pro"; 
 src: ...; 
 font-display: auto; 
 font-style: normal; 
 font-weight: 600; 
 font-stretch: normal; 
 } 

@font-face { 
 font-family: "adobe-caslon-pro";
 src: ...; 
 font-display: auto;
 font-style: italic;
 font-weight: 600;
 font-stretch: normal;
 }

The browser will match the most appropriate font based on the specified font-weight and font-style for an element.

Exact Match:

If the font-weight is 600 and font-style is italic, the browser will use the font defined in the third @font-face rule.
If the font-weight is 700 and font-style is italic, the browser will use the font defined in the first @font-face rule.
If the font-weight is 600 and font-style is normal, the browser will use the font defined in the second @font-face rule.

Closest Match:

If you specify a font-weight of 500 and font-style is normal, the browser will use the closest available weight, which is 600.
If you specify a font-weight of 700 and font-style is normal, since there’s no exact match, the browser will use the closest available weight, which is 600, and apply the normal style.

Fallback to Closest Style:

If you specify a font-style of oblique and there is no exact match, the browser will fallback to the closest style available, which could be either normal or italic depending on the other properties like font-weight.

Fallback to System Fonts:

If none of the @font-face rules match the specified font-weight and font-style, the browser will fallback to system fonts.

Related articles:

Adding fonts to your Shopify theme