Search code examples
htmlcssfontswebfonts

Using a specific glyph with a webfont

Using a webfont, I would like to use the font-feature-settings: option in CSS along with a span class in HTML in order to use a specific alternate glyph from the font set.

Which values (GID, Unicode?) do I need to use in correct syntax in order to target a specific glyph within the glyph alternatives?

enter image description here

Solution

  • These features use OpenType Stylistic Alternates (salt). From the glyph panel in Illustrator, we are shown that this is Stylistic Alt number 4 (granted, it’s not very clear what that means without additional context).

    If your CSS, you might add a class for each Stylistic Alternate:

    /* OpenType Stylistic Alternates */
.salt,
.salt-1 { font-feature-settings: "salt"; }
.salt-2 { font-feature-settings: "salt" 2; }
.salt-3 { font-feature-settings: "salt" 3; }
.salt-4 { font-feature-settings: "salt" 4; }

    Then, in your HTML:

    <h1>
  <span class="salt">C</span>offee
</h1>

    And using a specific number:

    <h1>
  <span class="salt-4">C</span>offee
</h1>

    enter image description here

    You might also decide to just apply the Stylistic Alt to the entire word, but this can have different results depending on the font:

    <!-- Apply the OpenType feature to specific letters -->

<div>
  <span class="salt-1">C</span>offee
</div>

<div>
  <span class="salt-2">C</span>offee
</div>

<div>
  <span class="salt-3">C</span>offee
</div>

<div>
  <span class="salt-4">C</span>offee
</div>

<!-- Apply the OpenType feature to whole words -->

<div class="salt-1">
  Coffee
</div>

<div class="salt-2">
  Coffee
</div>

<div class="salt-3">
  Coffee
</div>

<div class="salt-4">
  Coffee
</div>

    If you’d like to learn more about OpenType features on the web, you can check out my Utility OpenType CSS library, and other resources on the “further reading” at the bottom of the documentation.