My font is not showing the glyph I need - Dawn Theme

Store Design

Topic summary

Problem: In a Shopify Dawn theme, a custom font wouldn’t display the “ə” in a brand name (ə’serdiv) despite WOFF/WOFF2 uploads and CSS attempts using unicode-range values U+01DD and U+018F.

Guidance: A reply recommended defining the font via @font-face with proper sources and using unicode-range including U+0259 (lowercase schwa) and U+018F (uppercase schwa). Sample CSS was provided.

Follow-up: Implementing the sample initially fell back to a different font (Addington). However, the unicode advice prompted a check that revealed the font file/version didn’t have the correct mapping for the needed glyph.

Resolution: Updating the WOFF file to include the U+0259 glyph and switching references from U+01DD to U+0259 fixed the issue. The “ə” now renders correctly.

Key points:

  • Lowercase schwa = U+0259; uppercase = U+018F. Prior use of U+01DD (turned e) was incorrect for this font’s mapping.
  • Ensure the font file actually contains the required glyph and, if used, set unicode-range in @font-face.

Status: Resolved. Screenshots were shared for context.

Summarized with AI on December 28. AI used: gpt-5.
1

Hi there,

I’m hoping someone might be able to help me here again. It is driving me crazy and I think I have tried everything, but no solution is working.

I have loaded my fonts in the assets folder as woff and woff2. I have checked that the font files do in fact have the glyphs i require in FontDrop!

I have gone into every css area that i can think of to update the file as:

font-family: ‘August Roma Serif’;
unicode-range: U+01DD, U+018F;

and yet it still doesn’t upload the correctg font for the “ə” I need in ə’serdiv

I have attached the image to see if someone might be able to help with the correct code i would need to make this work?

Screenshot 2024-05-26 at 1.54.23 pm.jpeg
Screenshot 2024-05-26 at 1.54.23 pm.jpeg1762×478 36.9 KB

Screenshot 2024-05-26 at 1.55.27 pm.jpeg

2

  • Make sure your fonts are correctly loaded in your CSS file you should use the @font-face rule to define the font and include the unicode-range for the specific glyph

    Define the font-face in your theme’s CSS file liek thsi

@font-face {
  font-family: 'August Roma Serif';
  src: url('{{ "august-roma-serif.woff2" | asset_url }}') format('woff2'),
       url('{{ "august-roma-serif.woff" | asset_url }}') format('woff');
  unicode-range: U+018F, U+0259; 
}

.custom-font {
  font-family: 'August Roma Serif', serif;
}

.custom-font-specific {
  font-family: 'August Roma Serif', serif;
}

.custom-font-specific:before {
  content: "ə";
  font-family: 'August Roma Serif', serif;
}
3

replaceing the font-face code with this. new code and the URLs seems to turn off the font entirely and default to my other font “Addington”

Screenshot 2024-05-26 at 2.54.05 pm.png
Screenshot 2024-05-26 at 2.54.05 pm.png1644×364 57.4 KB

4

I wanted to come in here and tell you that although the coding didn’t work for me, it was your amendment to the UNI code that got me thinking that i have not uploaded the correct glyph. Once I updated the woff file with the U+0259 and changed all my codes from U+01DD to your glyph, everything worked! So thank you so much!!

This problem has had me tearing my hair our for like 3 months!

1 Like