Our Objective:
We aim to swap out the two-story lowercase "g" with the single-story version across our entire website text.
https://i.sstatic.net/mqpP9.png
Challenge:
The Rotunda font we use (Rotunda from TipoType Foundry) includes a Stylistic Set 1 with various alternate characters. However, we specifically want to change the lowercase "g" without affecting any other letters.
https://i.sstatic.net/AgumS.png
Paths We've Explored:
While there are CSS OpenType features that promise to target individual letters, our attempts have fallen short. A Reddit post we stumbled upon also grappled with the same issue and proposed a potential solution:
If your font only has one stylistic set, ss01, and you want to change only the lowercase "g" out of the ss01 set, you can use the font-variant-alternates property in CSS. This property allows you to access alternate glyphs in a font.
You can use the following CSS code to access the alternate "g" in the ss01 set:
selector { font-variant-alternates: "ss01" 1; }
You can replace selector with the selector for the element you want to apply the style to. The "ss01" value refers to the ss01 stylistic set of the font. The 1 value refers to the index of the alternate "g" glyph in the ss01 set.
However, determining the actual index number of the lowercase "g" remains a puzzle for us.
An additional resource here suggests using "font-variant-alternates" (stylistic(feature-value-name)), but seems to target letters through selectors like "inscriptional-g". The specific selector for the lowercase in Rotunda font is not known to us.
Our intuition tells us that the solution lies within the font-variant-alternates parameter, yet we struggle to piece together the correct CSS.
---
We experimented with a Javascript approach of wrapping all instances of the lowercase "g" in a span tag to target the character. However, this method proves inefficient and causes a brief "flash" on the page during character replacement. We are in pursuit of a safe, cross-browser (CSS) solution to accomplish this.