css Using alternate ligatures/glyphs in site H1 text.

Site URL: https://whbc.squarespace.com

Hello.

I'm using the Hanley family of fonts on a new site project built with 7.1. I'd like to use some of the alternate character ligatures/glyphs on the site, but I can't figure out how to do it.

So far, I've uploaded most of the Hanley fonts and configured them for use in various places using custom CSS.

Site password: hotdogs

On one page in particular, I'm using Hanley Script in an H1, and that's where I'd like to use the alternate glyphs. Attached are screenshots of the text live on the site and the other from Photoshop that shows what I want it to look like.

I've tried a number of variations of the following in a Code block:

<h1>From <span style="font-family: "Hanley Script"; XYZ;">t</span>he <span style="font-family: "Hanley Script; XYZ;">H</span>ear<span style="font-family: "Hanley Script; XYZ;">t</span></h1>

Where XYZ was attempts like the following:

font-variant-alternates: character-variant(XYZ);
font-feature-settings: "salt" 2;
font-feature-settings: "salt2" on;
font-feature-settings: "ss02"

I haven't found any combination that works. Anybody have any ideas? Do I have to use a font file format other than OTF, maybe?

Hi there, curious if you ever found anything on this. I went to the site and didn't see the alternate you were looking for, so I assume not. I am trying to do something similar with mine, except I want to use an alternate "a" in place of the default.

I have the exact same problem and the ligatures/glyphs are exactly why I chose this font. Hope someone can help.