Our themes, including the Xtra/Xclusive and Next theme, make use of Shopify's font picker, which gives you a variety of fonts to choose from. You can find a complete list of these fonts in the Shopify documentation: https://shopify.dev/docs/themes/architecture/settings/fonts#available-fonts
While there are many third-party fonts available, it's not practical for theme developers to include all of them since every merchant has different needs. Adding a custom font requires some knowledge of coding and troubleshooting in case any issues come up.
It's important to note that you should not try to add a font directly to a live or published theme. Instead, it's recommended to test it out in a development or test environment first to ensure everything works as expected.
Step 1: Upload the font files on your store
To upload your font files, follow these steps:
1. Go to the "Content" --> and then click on files.
2. Click on "Upload files".
3. Upload each version of the font file.
Also, it's really important to make sure you have the correct license for the font you're using. This ensures that you're using it legally on your commercial website and not violating any laws.
Step 2: Add the font code to your theme
To add your custom font to your Shopify theme, follow these steps:
1. Go to your Shopify Admin and click on "Online Store", then "Themes".
2. Find the theme you want to edit and click on "Actions", then select "Edit Code".
3. In the sidebar, click on "Assets" and look for "screen.css"
4. Scroll to the very bottom of the file and copy and paste the following code:
@font-face {
font-family: "NAME OF FONT";
src: url("NAME-OF-FONT-FILE.woff2") format("woff2"), url("NAME-OF-FONT-FILE.woff") format("woff");
}5. Replace "NAME OF FONT" with the actual name of your font (make sure to keep the quotation marks).
6. Replace "NAME-OF-FONT-FILE" with the exact name of the font file on your computer (including the file extension like .woff or .woff2). Pay attention to capitalization and hyphens.
That's it! You've added the font code to your theme. Now it's time to move on to the next step.
Understand this code:
Let's understand the above code:
1. The "@font-face" rule tells the theme that you're adding a custom font.
2. "font-family" is where you give your font a name. You can choose any name you like, such as "MyFont".
3. "src" is where you tell the theme where to find your font file. You need to replace "NAME-OF-FONT-FILE" with the actual file name of your font. The file should be in either .woff2 or .woff format.
By following this code structure and replacing the placeholder values, you'll be able to upload and use your custom font with the Xtra theme.
Step 4: Finally let's add some CSS
Go to online store > themes > Xtra/Xclusive > customize > theme settings > custom scripts and add the following code in header:
<style>
h1, h2, h3, h4, h5, h6 {
font-family: "SofiaPro" !important;
}
span, p {
font-family: "SofiaPro" !important;
}
</style>