Custom Fonts on Shopify Dawn Theme: Your Guide to Fixing Display Issues

View original discussion by shilpa_etsy on Shopify Community →

Hey store owners! Ever tried to add a custom font to your Shopify store, only to find it stubbornly refusing to show up? You're not alone. This exact challenge was recently brought to the Shopify Community by 'shilpa_etsy', who was trying to get their 'Brittany' font to display on their Dawn theme but saw something totally different. This thread was a goldmine of expert advice, which I'm distilling for you. It's a fantastic example of how a small coding oversight can lead to a big visual headache, and how the community helps pinpoint exact issues.

The Problem: A Case of Mistaken Font Identity

Shilpa_etsy's situation was classic: their CSS was set for 'Brittany', and the font selector even showed 'Brittany'. Yet, the font that actually rendered was clearly not the one intended. Imagine picking a perfect script font, only to have a generic sans-serif appear! Frustrating, right? The community experts quickly jumped in to uncover the culprits.

Community Insights: The Diagnosis

Ploqo, rshrivastava63, and others quickly found a critical mix-up: the @font-face rule for 'Brittany' pointed to Lovestory_Alt_SVG_web_optimized.otf. As kory-smith and Laza_Binaery highlighted, if your URL points to 'Lovestory', your browser will load 'Lovestory'!

Beyond the wrong file, Ploqo identified it as a massive 12.6 MB SVG color font. This harms web performance, and modern browsers like Chrome have stopped rendering SVG fonts, potentially leading to blank text. Even if it was the right font, it might not display correctly. See Ploqo's visual:

Same word: your Lovestory file (blank in Chrome) vs a normal font file

Other issues included incorrect CSS syntax: redundant format() declarations, an invalid font-weight: 4px (should be unitless like 400), and incorrect CSS comment syntax (// instead of /* ... */). The font was also only applied to tags inside headings, not all headings, which might not be the desired effect.

How to Fix It: Step-by-Step Guide

Alright, diagnosis done, now for the cure! Here's a consolidated, step-by-step guide from the Shopify Community experts:

Step 1: Get the Right Font Files

  • Ensure you have the actual font files for your desired font (e.g., 'Brittany').
  • Prefer modern web-optimized formats like .woff2 and .woff for better performance. Avoid large SVG color fonts.

Step 2: Upload Your Font Files to Shopify

  • In your Shopify admin, navigate to Content > Files.
  • Click Upload files and select your font file(s).
  • After upload, click the chain icon to copy the unique CDN URL for each file.

Content > Files: upload the real Brittany font, then copy its link

Step 3: Update Your Theme's CSS

  • Go to Online Store > Themes, then Actions > Edit code for your Dawn theme.
  • Open base.css or a similar stylesheet in your Assets folder.
  • Locate and replace your existing @font-face block. Use a clean, corrected version. If you have multiple font formats, provide them as fallbacks within one src property.

Option A: For a single font file (e.g., .otf or .woff2)

@font-face {
  font-family: 'Brittany';
  src: url('YOUR-BRITTANY-FILE-URL.otf') format('opentype'); /* or format('woff2') */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

Option B: For multiple font formats (recommended for browser compatibility)

@font-face {
  font-family: 'Brittany';
  src: url('YOUR-BRITTANY-FILE-URL.woff2') format('woff2'), /* Modern browsers */
       url('YOUR-BRITTANY-FILE-URL.woff') format('woff'),   /* Older browsers */
       url('YOUR-BRITTANY-FILE-URL.otf') format('opentype'); /* Fallback */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
  • Important: Replace placeholders with actual URLs from Shopify Files. Ensure format() matches the file type!
  • Correct font-weight: Change font-weight: 4px; to a valid unitless value like font-weight: 400; or normal;.
h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong {
  font-family: 'Brittany', cursive; /* Add a generic fallback font */
  font-weight: normal; /* Corrected value */
  font-size: 60px;
}
  • Adjust Font Application Scope: If you want your custom font on all headings, not just bolded text, modify your selector.
h1, h2, h3, h4, h5, h6 {
  font-family: 'Brittany', sans-serif !important; /* !important overrides theme defaults, use sparingly */
  font-weight: 400 !important;
}
  • Fix CSS Comments: Change // for comments to /* ... */.

Best Practices & Final Tips

Beyond these fixes, remember these best practices for custom fonts on Shopify:

  • Performance: Always aim for small font file sizes. WOFF2 is best for web. Large SVG color fonts can significantly slow your site.
  • font-display: swap;: This property in @font-face tells the browser to display a fallback font while your custom font loads, preventing blank text (FOIT) and improving perceived performance.
  • Consider Font Apps: If code isn't your comfort zone, apps like Fontify or Typolab (as Ploqo mentioned) simplify custom font integration with a dashboard. They often handle optimization and CSS generation, making it easy to maintain your brand's look on your Shopify store.

A small font issue can involve many technical layers. Shilpa_etsy's experience, and the Shopify Community's help, show that attention to detail – especially with file paths and format declarations – makes all the difference.

If your custom font is playing hide-and-seek on your Dawn theme, revisit these steps. You'll likely find the culprit. A big thank you to Ploqo, rshrivastava63, cuongnm_trooix, kory-smith, and Laza_Binaery for their excellent contributions – their collective wisdom is invaluable for making our Shopify stores truly shine!

Share:

Start with the tools

Explore migration tools

See options, compare methods, and pick the path that fits your store.

Explore migration tools