CODEWITHSUNDEEP
csstypographyopentype
Bento
Bento

Reputation: 333

CSS OpenType: How to replace a single letter in entire text with character from Stylistic Set 1 without affecting other letters?

Would like to achieve:
We would like to replace the double-story lowercase "g" with the single-story version in our entire website text.

enter image description here

Problem:
Our font Rotunda (TipoType Foundry link) has a Stylistic Set 1 which contains also other alternate characters. However, we only would like to change the lowercase g and not affect any other letters.
enter image description here

Leads:
There some CSS OpenType features which seem to allow to replace only a single letter, but we were unable to get it to work. We found this Reddit post which lists the same issue and a user posted this 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, we are unsure how to find the actual index number of the lowercase "g".

Another resource is this, which recommends to use "font-variant-alternates" (stylistic(feature-value-name)), but again they seem to target letter via selectors like "inscriptional-g". We don't know this selector of lowercase in the Rotunda font.

Our feeling is that this can be achieved with the font-variant-alternates parameter, but we are unable to put the correct CSS together.

---

We successfully tried a Javascript option to add a span tag around all instances of the lowercase "g" and target the character this way. But it seems inefficient and there's also a short "flash" when the character is replaced on the page. We are looking for a safe cross-browser (CSS) solution to achieve this.

Upvotes: 0

Views: 575

Answers (1)

herrstrietzel
herrstrietzel

Reputation: 17317

You may be able to apply an alternate style sets via @font-feature-values or font-feature-settings.

In the example below using "IBM Plex Serif" we can replace all "g" occurrences with alternate glyphs by selecting the ss02 style set – without replacing "a" occurrences.
This only works because the font provides a set for all "g" alternate glyphs (including g-diacritics).

In other word: we can't actually target/replace single glyphs. If your font only includes a set with all alternates – all glyphs from this set will be replaced (i.e "a" and "g"). In this case wrapping all "g" occurences is your only chance.

Inspecting stylistic sets

These style sets are not standardised and vary between different fonts - so you may need to select a different style set, e.g. ss01. You can inspect all alternate features with the tool wakamai fondue to find the desired stylistic set.

opentype features wakamai fondue

@font-face{
  font-family: 'Plex Serif';
  font-weight: normal;
  font-style: normal;
  src : url('https://mdn.github.io/css-examples/font-features/fonts/plex/IBMPlexSerif-Regular.woff')
}

body{
font-family: 'Plex Serif';
font-size:10vmin;
}

@font-feature-values "Plex Serif" {
  @styleset { alt-a: 1; alt-g: 2; }
}

.alt-g{
  font-variant-alternates: styleset(alt-g);
}

.alt-g2{
  font-feature-settings: 'ss02' 1;
}

.alt-a{
  font-variant-alternates: styleset(alt-a);
}

.alt-a2{
  font-feature-settings: 'ss01' 1;
}
<p class="">Hamburg (all standard)</p>

<h3>@font-feature-values</h3>
<p class="alt-a">Hamburg (a alt)</p>
<p class="alt-g">Hamburg (g alt)</p>

<h3>font-feature-settings</h3>
<p class="alt-a2">Hamburg (a alt)</p>
<p class="alt-g2">Hamburg (g alt)</p>

Upvotes: 0

Related Questions