We all know the awkward flash of a different font showing before your custom font, while you hope that no one else noticed that.
The reason that we want to use the code instead of the code from Google is because preloads the font and allows your page to load faster. If you don’t know there that is, just make sure it’s added before the tag. At the top of the file, between the and tags, you want to paste your font code from google (the code). To find the, go to the “theme.liquid” file located in the “Layout” folder of your Shopify theme. The instructions say, “To embed a font, copy the code into the of your html. You’ll see that the code lists all the font families and weights that you’ve chosen. Here, Google makes it easy for you to copy the code to add to your theme. On the top right, there is a button that opens a list of all your selected fonts. Do this for each font style that you need (both family and weight/style). If it’s not there, proceed.įind the font you want to use on Google Fonts, and click “Select this style”. Shopify does include several Google fonts so firstly, I’d recommend going to the font settings in the theme customizer and double checking that your desired font isn’t included so you don’t waste your time.
If you don’t know there that is, add it immediately before the tag. I paste mine directly after the CSS files. At the top of the file, between the and tags, you want to paste your font code from Adobe (the code). Open the “theme.liquid” file located in the “Layout” folder of your Shopify theme. It says “copy this code into the of your html”. Here you’ll see the code you need to embed. Once you’ve selected all your fonts, go to “Manage Fonts” → Web Projects. Remember to only include the ones you will really use in order to minimize the website loading speed. Type in a new project name or add to an existing project, then add all the font families and styles you want to use on the website to the project. Adobe Fontsįind the font you want to use on Adobe Fonts and click “Add to Web Project”. This step is a little different depending on how you’re importing your fonts so jump to Adobe Fonts, Google Fonts, or Custom Font Files on the Table of Contents above to get started. You should also specify “serif” or “sans-serif” as a final fallback font, in case your selected fallback font is not available.Start by opening your theme code. Find more web-safe fonts.Ĭhoose a fallback font that is similar in style to the custom font you use.
Common web-safe fonts include Arial, Georgia, Helvetica, Times New Roman, and Verdana.
When using a custom font, always provide a web-safe fallback font to display for those recipients using clients that don’t support custom fonts. The font will not be available in the dropdown menu within the template editor, and custom fonts are not supported in product, button, or header/link blocks. In order to use custom fonts, the code must be manually added to each message you send.