MQ

Mohd Baquir Qureshi

Technical Blog
✨
Theme Hacks

Implementing Custom Fonts in Shopify Themes

By Mohd Baquir Qureshi •
Typography and design

Brand identity relies heavily on typography. While Shopify offers a vast library of built-in fonts, many premium brands purchase custom typefaces to stand out. However, adding custom web fonts improperly can destroy your page load speed and cause Layout Shifts (CLS). Here is how to do it right.

1. Convert to WOFF2 Format

If you purchased a font, you likely received an OTF or TTF file. These are massive. You must convert them to .woff2 format, which provides the best compression and is supported by all modern browsers. Do not bother with EOT, SVG, or TTF web fonts in 2026.

2. Upload to Shopify Files

Go to your Shopify Admin, navigate to Content > Files, and upload your .woff2 files. This leverages Shopify's global CDN automatically.

3. Add @font-face in CSS

Open your theme code and find your main CSS file (e.g., base.css or theme.css). Add the following @font-face declaration:


@font-face {
  font-family: 'CustomBrandFont';
  src: url('{{ "brandfont-bold.woff2" | file_url }}') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

Crucial Detail: Always use font-display: swap;. This tells the browser to immediately render text using a fallback system font until the custom font downloads, preventing the dreaded "invisible text" flash and drastically improving your First Contentful Paint (FCP) metric.

4. Preload the Font

To tell the browser to start downloading the font immediately (even before it parses the CSS), add a preload tag in your theme.liquid file within the <head>:


<link rel="preload" as="font" href="{{ 'brandfont-bold.woff2' | file_url }}" type="font/woff2" crossorigin>

Only preload critical fonts (like the one used for your main headings). Preloading too many fonts will block other critical resources like CSS and JavaScript.