How to add custom fonts in your shopify store

Adding custom fonts to your Shopify store is a great way to make your website look unique and professional. Custom fonts can enhance your brand identity and improve the overall user experience. In this guide, we’ll walk you through the process of adding custom fonts to your Shopify store.

Step 1: Choose and Download Your Font

Select Your Font: Visit a font website like Google Fonts, Adobe Fonts, or any other font provider. Choose a font that suits your brand's style and download the font files. These files will typically be in .woff2, .woff, .ttf, or .otf formats.

Step 2: Upload the Font Files to Shopify

Log in to Shopify Admin: Go to your Shopify admin panel.

Navigate to Content: In the left sidebar, click on "Content" and then select "Files."

Upload Font Files: Click on the “Upload files” button and upload your font files. This will store your font files in Shopify's file storage.

Step 3: Add Font to Your CSS

Get File URL: After uploading, copy the URLs of the uploaded font files. You can find these URLs by clicking on the font files in the "Files" section.

Open Your Theme’s CSS File: Navigate to "Online Store" in the sidebar and then select "Themes." Find your current theme, click the “Actions” button, and select “Edit Code.” In the “Edit Code” section, find your theme’s CSS file. This file is usually named “base.css”.

Insert Font Face Code: Add the following code in the end of your CSS file:

@font-face {
    font-family: 'Gwendolyn';
    src: url('https://cdn.shopify.com/files/Gwendolyn.woff2') format('woff2');
}

Replace 'Gwendolyn' with your desired font name and URL-to-your-font-file with the actual URLs of the font files you uploaded.

Step 4: Apply the Custom Font to Your Shopify Store

Specific Elements: If you want to apply the font to specific elements like headings or buttons, add this code:

h1, h2, h3, h4, h5 {
    font-family: 'YourFontName'' !important;
}

Global Font Application: To apply the custom font to the entire store, add this code to your CSS file:

 * {
    font-family: 'YourFontName' !important;
}

Step 5: Save and Preview Your Store

Save Changes: Don’t forget to save your changes.

Preview Your Store: Check your store to see how the new font looks. If you don’t see the changes immediately, try refreshing the page or clearing your browser’s cache.

Conclusion

By following these simple steps, you can easily add custom fonts to your Shopify store, giving it a personalized and professional look. Custom fonts can significantly enhance your brand identity and improve the overall aesthetics of your online store. Happy customizing!

Video Tutorial

Here's a video tutorial for how to add custom fonts in your shopify store checkout the video.