#Upload font kit to shopify how to#
#Upload font kit to shopify code#

See the last line of code and replace 'xxxx' with your unique project code. If you are using an Adobe font, put the code from your Adobe font project in the file instead.

If your fonts were added to assets, add the following code with your font file names. If you are using a premium theme, check for a custom.css file instead. Step 2: Import font to stylesįind your file where all your theme styles are held. Here you need to upload your web font files. Scroll down to the Assets folder and click ' Add a new asset'. Go to Online Store → Actions → Edit Code. If you have the web font files, you want to head to your theme code. Head to your site, right-click, and select Inspect or Inspect Element depending. In this tutorial, we will use the transfonter site to achieve this. To start, you can use the public URL on your site to upload the font in Klaviyo. ttf files, we will need to convert them to. Let me walk you through the steps of adding font files and using Adobe fonts in your Shopify project.Ĭustom Fonts on Shopify Step 1: Add the font For your font to work on Shopify, you need to include at least a.

You don't need an app to add a custom font to Shopify. We've often used Adobe Fonts when designing for our clients, due to the availability of high-quality fonts that can be used for both print and web design.You can find a more recent tutorial on my Luna Templates article If you're already using this code on your site, it may take a few minutes for these changes to propagate, so it might not show up right away.Ĭhoosing typefaces is an exciting part of a brand design, and Adobe Fonts has plenty of options to choose from. From here, you can check or uncheck the individual fonts, or delete the entire family. Go to the 'Edit Project' button, which will toggle a list of font families in that project. How do you make changes? Managing Fontsįrom the Adobe Fonts homepage, navigate to 'Manage Fonts' in the top right corner of the screen, under the Creative Cloud login. Sometimes, you need to add or remove a font - maybe you forgot to add that italic weight for emphasis () text.

#Upload font kit to shopify how to#

Here's an in-depth guide that explains how to update your code to reflect your new font (go to Step Four under 'How to add custom fonts to Shopify). Look for 'font family:' declarations in your code to do this. Note: Your developer will need to edit the CSS in order for your new font to show up on the website. Or, if you're working with the Fuel Made team on a custom site design, send the to us, and we'll add it to our code. Once you add all your fonts to the project, copy the and add that code snippet to the tag of your theme. If you have more than one typeface in your design, you can select the 'Done' button, and repeat the first 3 steps with a different font family. Once you’re done that, select 'Create or add to existing project.' This will open a dropdown list of your existing web projects-if you have any-or you can create a new one.

A good range is between 4-6 max for your entire web project. Don’t choose too many weights because the more font files a site has to load the more your web performance will take a hit. This opens a pop-up modal where you can select weights and styles for this typeface. Once you find the font family you need, select 'Add to Web Project.' Head to and sign into your Creative Cloud account.īrowse the available fonts, or search for a specific typeface. This will help you follow along to create your own.īut if you prefer to read the instructions, all of the steps in the screencast are listed out in this article as well. If you’re a visual learner, we recorded a screencast creating a demo web project. How to set up Adobe Fonts on your Shopify store