Fix Custom Fonts in Shopify Dawn: Brittany Not Appearing? Troubleshooting Guide

Hey store owners! Ever tried to add a beautiful custom font to your Shopify Dawn theme, only to find it just… isn't showing up? Or worse, it's showing up, but it's the wrong font entirely? You're definitely not alone. We recently saw a fantastic discussion in the Shopify Community that perfectly illustrates this common hurdle, and I wanted to break down the insights for you.

Our friend shilpa_etsy posted, asking why their "Brittany font is not appearing on my theme, the name is brittany but it’s a different font." Sound familiar? Let's dive into what was happening and, more importantly, how to fix it!

The Case of the Mistaken Identity: Brittany vs. Lovestory

The core of shilpa_etsy's problem, as several community experts like rshrivastava63, kory-smith, and Laza_Binaery quickly pointed out, was a classic mix-up. While their CSS declared font-family: 'Brittany';, the actual font file being loaded was named Lovestory_Alt_SVG_web_optimized.otf. It's like calling your dog 'Rover' but feeding 'Fido' – the browser sees 'Brittany' in the CSS, but it's physically loading the 'Lovestory' file!

This is a super common mistake. You might download a font pack, rename the file on your computer, but then upload the original file to Shopify without updating your CSS to match the *actual* file name or, more critically, the *correct* font file itself.

Beyond the Basics: File Types and CSS Quirks

But the community's wisdom didn't stop there. Ploqo (Ajay), who provided the most comprehensive initial answer, highlighted a couple of other crucial issues:

1. The Problematic SVG Color Font

The Lovestory_Alt_SVG_web_optimized.otf file wasn't just the wrong font; it was also a massive 12.6 MB SVG color font. As Ajay explained, "Chrome stopped rendering SVG fonts, so your bold headings can show up blank in Chrome." This is a big deal for site performance and cross-browser compatibility. Modern web fonts should ideally be in formats like .woff2 or .woff for optimal loading and browser support. You can see the difference Ajay illustrated:

2. CSS Syntax and Efficiency

The original code also had some CSS issues that, while not always fatal, are important for best practice:

Multiple src declarations for the same file: Shilpa_etsy had the same Lovestory URL listed four times with different format() hints. As Ajay and cuongnm_trooix pointed out, for a single font file, you generally only need one url(...) format(...) line. If you're providing multiple *different* font formats (like .woff2, .woff, .otf) for broader browser support, each should have its own url() entry, but not the same URL with different format hints.
Invalid font-weight: The code had font-weight: 4px. Font weights should be unitless numbers (e.g., 400, 700) or keywords (normal, bold). cuongnm_trooix specifically recommended font-weight: 400;.
Incorrect CSS comments: cuongnm_trooix also noted that // comments aren't valid in CSS; you need to use /* ... */.

Your Step-by-Step Fix: Getting Your Custom Font Right

Alright, let's get your actual Brittany font (or whatever custom font you're using) showing up correctly on your Dawn theme. Here’s a consolidated approach based on the excellent advice from the community:

Step 1: Get the Right Font File

First, make absolutely sure you have the correct font file for 'Brittany'. Look for modern web formats like .woff2 (most preferred), .woff, or a standard .otf. Avoid large SVG color fonts.

Step 2: Upload to Shopify Files

In your Shopify admin, go to Content > Files.
Click the Upload files button.
Select and upload your correct 'Brittany' font file(s).
After uploading, click the chain icon next to each file to copy its unique Shopify CDN URL. You'll need this.

Step 3: Update Your Theme's CSS

From your Shopify admin, go to Online Store > Themes.
Find your Dawn theme, click Actions > Edit code.
In the file editor, navigate to the Assets folder and open base.css (or theme.css, depending on your theme's structure).

Find your existing @font-face block for 'Brittany'. It might look something like this (but with the Lovestory URL):

@font-face {
  font-family: Brittany;
  src: url(https://cdn.shopify.com/s/files/1/0603/7484/3489/files/Lovestory_Alt_SVG_web_optimized.otf?v=1786553567) format(woff2),
  url(https://cdn.shopify.com/s/files/1/0603/7484/3489/files/Lovestory_Alt_SVG_web_optimized.otf?v=1786553567) format(woff),
  url(https://cdn.shopify.com/s/files/1/0603/7484/3489/files/Lovestory_Alt_SVG_web_optimized.otf?v=1786553567) format(ttf),
  url(https://cdn.shopify.com/s/files/1/0603/7484/3489/files/Lovestory_Alt_SVG_web_optimized.otf?v=1786553567) format(.otf?v);
}

Replace that entire block with a cleaner, corrected version. Here’s what Ajay suggested, adapted with best practices:

@font-face {
  font-family: 'Brittany';
  src: url('YOUR-BRITTANY-FILE-URL.woff2') format('woff2'), /* Prefer WOFF2 */
       url('YOUR-BRITTANY-FILE-URL.woff') format('woff'), /* Fallback WOFF */
       url('YOUR-BRITTANY-FILE-URL.otf') format('opentype'); /* Fallback OTF */
  font-weight: normal; /* Or 400 for regular, 700 for bold */
  font-style: normal;
  font-display: swap; /* Improves loading experience */
}

Important: Replace 'YOUR-BRITTANY-FILE-URL.woff2', .woff, and .otf with the actual URLs you copied from your Shopify Files, matching the format() to the file type. If you only have one file type (e.g., just an .otf), one src line is sufficient:
```
@font-face {
  font-family: 'Brittany';
  src: url('YOUR-BRITTANY-FILE-URL.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
```
While you're there, if you used // for comments, change them to /* your comment here */.

Step 4: Apply Your New Font to Elements

Now that your font is correctly declared, you need to tell your theme where to use it. Shilpa_etsy's original code applied Brittany only to bold text inside headings (h1 strong, h2 strong, ...). If that's your intention, make sure your font-weight is corrected:

h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong {
  font-family: 'Brittany', cursive; /* Always good to add a generic fallback like cursive */
  font-weight: normal; /* Or 400, 700, etc. */
  font-size: 60px; /* Adjust as needed */
  letter-spacing: 0rem !important;
}

However, if you want *all* your headings (h1, h2, etc.) to use the 'Brittany' font, you'll need a broader selector. cuongnm_trooix provided a great example:

h1, h2, h3, h4, h5, h6 {
  font-family: 'Brittany', cursive !important; /* Use !important if needed to override theme defaults */
  font-weight: 400 !important;
}

Remember, the !important tag should be used sparingly, but it can be necessary when overriding existing theme styles, especially with the Dawn theme's robust styling.

Getting custom fonts to work can sometimes feel like a puzzle, but as this community discussion shows, it often comes down to a few key details: making sure you're loading the *right* file, using the *correct* format declaration, and ensuring your CSS properties are valid. Always double-check your file names, URLs, and CSS syntax. With these tips from the Shopify community, you'll have your store looking exactly how you envisioned it in no time!

Custom Fonts on Shopify Dawn Theme: Why Your Brittany Font Might Be Showing Up as Lovestory (and How to Fix It!)