Display alternative font character with CSS

Question

I'm building a website on Squarespace and am using a web font that I bought. It has an alternative for "A" that I want to use instead of the default.

Within the CSS Panel on Squarespace I've been able to insert my font, code in the ligatures - but I can't figure this out.

The glyphs panel in Illustrator for that alt A is:

U+0041 Alternatives#0 (aalt0)

I'm not even sure what to try.

Answer 1

Try this -

.your-element-class {
  font-feature-settings: "aalt" 1; /* Enable the alternative "A" glyph */
  -webkit-font-feature-settings: "aalt" 1; /* For better compatibility with Safari */
}

replace the your-element-class with your class/id name