Can I use alternate glyphs in HTML code?

Question

I have chosen a font in Photoshop which has many alternate glyphs for each letter

(see attached image)

is there a way to display different glyphs when coding this in HTML/CSS by using the GID and Unicode references?

Answer 1

It's not possible to specify the glyph directly in HTML as far as i know, but you can use stylistic sets and other OpenType features in CSS via font-feature-settings and font-variant. Browser support is surprisingly good.

Example:

<p>A quick brown fox jumps over the lazy dog.</p>
<p>A quick brown fox jumps over the lazy do<span class="ss01">g</span>.</p>
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:100');

body {
  font-size: 48px;
  text-align: center;
  font-family: "Roboto Slab";
  font-weight: 100;
  font-style: normal;
}

.ss01 {
  font-feature-settings: "ss01" 1;
}
</style>

• MDN article on font-feature-settings: https://developer.mozilla.org/en/docs/Web/CSS/font-feature-settings

• MDN article on font-variant: https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant

• 'fontinfo' tool by Thisarmy: http://code.thisarmy.com/fontsinfo/