Shopify Development

2 Ways to Add Custom Fonts to Shopify Theme

ndrishinski

, , ,

Custom fonts are a great way to add character and customization to your Shopify theme. Adding a custom font is also easier than you think. In this example, we are going to use a Google Font here.

Prefer Video?

Enjoy otherwise read on!

Option 1: Adding Font Using an External CDN

Choose a Font: First, choose the font you want to use. You can find many free and paid fonts from various sources like Google Fonts, Adobe Fonts, Font Squirrel, etc.

Find the Font Embed Code: If you’re using a CDN like Google Fonts, select the font styles and weights you need, and copy the provided embed code:

<!-- theme.liquid --!>
<head>
  <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=Ojuju:wght@200..800&display=swap" rel="stylesheet">
</head>

You can simply add the above code in theme.liquid within the <head></head> tags.

Apply the Font: Once the font is added to your theme, you can apply it to specific elements in your CSS. For example:

.some-class {
  font-family: "Ojuju";
}

And voila! You now have a custom font that is integrated using Google’s reliable CDN.

Option 2: Adding Font Files to Shopify Files

Prepare Font Files: Ensure you have font files (e.g., .woff, .woff2), upload them to your Shopify store’s “content -> files”. You can do this by going to “Content” > “Files” > “Upload File” to upload your font files.

Edit Theme Files:

  • Open theme code
  • Open the CSS file where you want to apply the font styles (e.g., theme.scss.liquid, styles.css.liquid).
  • Add your @font-face declarations to import and use the font files. For example:
<style>
       @font-face {
            font-family: 'Ojuju-Regular';
            src: url("{{ 'Ojuju-Regular.woff2' | file_url }}") format('woff2');
        }
</style>

A couple caveats:

  1. Your font must be in woff or woff2 format. I could not get a ttf format to work until I converted it to woff2.
  2. You must add the above font-face declaration inside a .liquid file. Otherwise you won’t be able to reference the file_url.

Now you can simply add the font-family to a css selector as we did above:

.some-class {
  font-family: "Ojuju", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

Self hosted fonts vs CDN: Which is better?

There are several pros and cons of each. Starting with self hosted pros:

  1. Reduced DNS Lookups: Loading fonts from a CDN requires an additional DNS lookup, which can introduce latency, especially if the user’s DNS resolver is slow. Hosting fonts locally eliminates this overhead.
  2. Reduced Network Latency: Fonts hosted locally are served from the same server as the rest of your website’s assets, reducing the number of network round-trips required to fetch resources. This can result in faster load times, especially for users located far from the CDN’s servers.
  3. Caching Control: When you host fonts locally, you have more control over caching policies. You can set longer cache lifetimes for font files, reducing the need for repeated downloads by returning visitors.
  4. Avoid External Dependencies: Relying on external CDNs introduces dependencies on third-party services. If the CDN experiences downtime or performance issues, it could impact your website’s font loading times. Hosting fonts locally ensures that your website’s performance is not dependent on external services.

However, there are also potential drawbacks to hosting fonts locally:

  1. Increased Server Load: Hosting fonts locally adds additional load to your server, especially if your website receives a large volume of traffic. This could potentially impact server performance and response times.
  2. Limited Geographic Distribution: CDNs often have servers distributed worldwide, allowing them to serve content from servers closer to the user’s location, reducing latency. Local hosting may not offer the same geographic distribution benefits.

Hosting fonts locally can offer performance benefits in terms of reduced latency and control over caching, but it’s essential to weigh these benefits against the potential drawbacks, such as increased server load. Ultimately, the best approach depends on your website’s specific requirements and infrastructure. For Shopify specifically, self hosted drawbacks don’t apply as they handle the infrastructure of assets/files CDN for us. So we can rest assured and avoid additional DNS lookups.

Conclusion

As you can see above, we have implemented a custom font from Google Fonts that is displayed on our homepage banner. I hope you enjoyed this tutorial!