Customising Fonts in Shoprocket

Customising the typography of your Shoprocket store or embeds can significantly enhance the look and feel of your online presence. Here's a comprehensive guide to help you navigate through the process.

Choosing Fonts Through the Shoprocket UI

For Hosted Stores and Embeds

1. Access the Typography Settings: Navigate to 'Sales Channels' in your Shoprocket dashboard. Choose 'Existing Website' or 'Hosted Store'.
2. Select Your Font: Under the 'Typography' section, you have the option to select from a variety of web-safe fonts. These fonts are universally compatible and designed to display consistently across different browsers and devices.

Inheriting Fonts from Your Website

Shoprocket embeds are designed to seamlessly integrate with your existing website, inheriting the fonts defined in your site's CSS.

Default Behaviour:

• By default, if your website CSS includes a generic font rule like body * {font-family: YourFont;}, Shoprocket embeds will automatically adopt this font.

Customising Through the Embed UI:

• You can also specify a font family directly in the Shoprocket embed UI. However, this option is limited to web-safe fonts only.

Troubleshooting Font Inheritance

Sometimes, Shoprocket embeds might not inherit your website's font as expected. In such cases, you can explicitly define the font for Shoprocket elements.

Creating Custom CSS Rules:

1. For Your Entire Page:

   body * {
       font-family: [your font];
   }
   

2. Specifically for Shoprocket Embeds:

   .sr-element * {
       font-family: [your font];
   }
   

   Replace [your font] with the actual font you wish to apply.

Using Non-Web Safe Fonts

If you prefer to use a non-web safe font (like a custom or branded font), ensure the following:

1. Font Inclusion: The font must already be included or embedded in your website. This can typically be done through CSS @font-face rules or by using a font service like Google Fonts.
2. Apply the Font: Once the font is included in your site, you can use the above CSS rules to apply it to your Shoprocket embeds.