Jump to content

Using alternate ligatures/glyphs in site H1 text.

Recommended Posts

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



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?

Screen Shot 2021-02-15 at 11.17.18 AM.png

Screen Shot 2021-02-15 at 11.17.23 AM.png

Screen Shot 2021-02-15 at 11.28.53 AM.png

Link to comment
  • 3 months later...
  • Replies 2
  • Views 1.4k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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.

Link to comment
  • 7 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.