Our theme offers several methods to add custom fonts to your theme, however, you may find yourself wanting to use a specific font from Adobe Typekit. Adobe Typekit is an online font provider which allows you to use various fonts provided from their libraries across your storefront.
Before you can use Typekit, you must acquire an Adobe ID. If you have already signed up for this service, please sign in to your Adobe Typekit account, otherwise, please create a new Adobe account.
Creating Your Kit
After you have successfully logged into your Typekit account, you can head to the right tab and click on the "Kits" link, here, you can hit the "Create new kit" button.
After hitting this button you will need to enter some basic information such as your Name and Domain URL. Please copy and paste your stores URL in this section and your name in this section. After this has been done please proceed to the next step.
Adding Typekit To Your Theme
On the next page, you will find your scripts to add into your theme. Please copy and paste these script tags into your theme.liquid layout found in Online Store > Themes > Edit HTML/CSS > Layouts, these script tags can be placed anywhere between the opening and closing head tags.
Selecting A Font
After these tags have been added into your theme, you are ready to pick a font to use across your storefront, please select a font of your choice and add it to your already existing kit. Once a font has been added to your kit you can go ahead and publish your kit by clicking the "Publish" button in the bottom right of your page.
Please keep in mind that in order for your font to be displayed, you must publish your kit, each time you change any settings or domains this kit will need to be republished.
Using Your New Font
Congratulations, you have now published your first kit and you are ready to see your font in action! Please head into your styles.scss file located in Online Store > Themes > Edit HTML/CSS > Assets and scroll to the very bottom of the file, here, you can add in your custom CSS to call out your font like so:
You can use your new font for any element needed in your theme, if you are unsure about how to add this CSS, please follow the instructions provide by Typekit by clicking the "Using fonts in CSS" link.