How To Add and Edit a Custom Fonts to Your Shopify Store?
Bhavesha | June 25, 2022 | 5 min read
Overview
This is a tutorial for uploading fonts to Shopify. In this tutorial, we will show you how to add custom fonts to Shopify. Shopify custom fonts and Shopify font changes are some of the useful information you’ll find here. ensure success by following the steps exactly.
You Can Add Fonts to Your Shopify Store By Following These Steps
A few methods exist for adding fonts to your Shopify site-
1. How to Add Google Fonts to Shopify
Google Fonts can be added to your store’s font library in a few simple steps.
Step 1: First, Find Fonts that you want
To choose a font, visit Google Fonts.
A few different criteria can be used to filter fonts, including category, language, font properties, font size, and trending options like newest, most popular, name, oldest, and trending.
Step 2: Choose Font that You Want
Once you click on the font like “Roboto Regular 400” Select the font size “28px”.
The pop-up window will allow you to copy the code once you click the “Select this style” button.
Step 3: Edit your theme files and paste the code
From your Shopify dashboard, navigate to Online Store > Themes > Actions > Edit code.
Go to the theme.liquid file. Find the tag and paste the code inside. Once you are done, save your changes.
Example Code:
<link rel="preconnect" href=" https://fonts.googleapis.com"><link rel="preconnect"href="https://fonts.gstatic.com"crossorigin><link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">Step 4: Go to your theme’s style files
In the “Assets” folder, you will find a style file named “theme.scss.liquid”.
Specify the according CSS rule:
font-family: ‘Roboto’, sans-serif;
2. Add Custom Fonts to Shopify
The following steps will guide you through the process.
Step 1: Find your third-party font
The first step is choosing the font you want to use and ensure you get it in a specific format, such as EOT, SVG, TTF, WOFF, or WOFF2.
To make changes to your code, navigate to Online Store > Themes > Edit Code.
Step 2: Find your stylesheet in Assets and upload your fonts
From here, scroll down and click on Assets >Stylesheet.CSS.liqud on the sidebar.
To upload font files, click on Assets > Add New file > Upload
Step 3: Paste the following code into theme.css.liquid
Navigate to theme.css.liquid in Assets. Add the following code to the bottom.
Example code:
@font-face {font-family:”Roboto”;src: url( {{ 'roboto-light-pro.eot' | asset_url }});src: url( {{ 'roboto-light-pro.eot?#iefix' | asset_url;}})format("embedded-opentype"),url( {{ 'roboto-light-pro.woff' | asset_url;}})format("woff"),url( {{ 'roboto-light-pro.woff2' | asset_url;}})format("woff2"),url( {{ 'roboto-light-pro.ttf' | asset_url;}})format("truetype");font-weight:300;font-style:normal;}Step 4: Update code to match your new font
Make sure that you replace “FONT” within the code you copied with the name of your font, and include any hyphens or underscores in the name so that it’s an exact match.
Below that code, add the following code to change the types of text.
Please replace “FONT” with your font name as follows:
h1,h2,h3,h4,h5,h6,.headline,.subtitle {font-family: ‘Roboto’!important;}Step 5: Save your Changes and check your new font
Be sure to save your changes after you have finished all the steps.
*May require design and functionality changes
#Blog Pages are not part of Optimization Scope
This content is very informative and well define with example. Thank you for sharing with us.