How to apply font ligatures to a text block – help required

One of the basic tenets of typography is the application of a ligature to a particular combination of characters in order to achieve a smoother textural effect to an overall body of text. Common ligatures in hot metal type (letterpress) were fi, fl, ffi, ffl etc. The file attached shows the application of a ligature to an f i combination. See how the dot of the i (the tittle) sits clumsily next to the top of the f  whereas the version with the ligatured glyph is much smoother.

Modern digital fonts have multiple ligatures built into the font as individual glyphs and industry standard design software automatically recognizes when a ligature needs to be inserted.

However Squarespace does not automatically substitute ligatures and there appears to be no function in settings to enable you to set this up.

I assume there must be a coding solution to this and if so, how do I apply it as I have no coding experience.

PS - I found this, is it appropriate?

https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures

Was this solved?

I tried this code. It displayed Lora Serif, and showed ligatures. However, when I changed the font to "karmina-sans", it changed the font to Karmina; however, no ligatures. Karmina Sans does come with ligatures — in particular "fi". When I type in "fi" in Adobe Illustrator, the ligature appears, so I tried copying and pasting the ligature, and voila, a ligature appeared. However, the ligature was not Karmina Sans.

See attached examples of the Karmina Sans ligature at work in other software programs.

p {
  font-family: Lora, serif;
}
.normal {
  font-variant-ligatures: normal;
}

.none {
  font-variant-ligatures: none;
}

.common-ligatures {
  font-variant-ligatures: common-ligatures;
}

.no-common-ligatures {
  font-variant-ligatures: no-common-ligatures;
}

.discretionary-ligatures {
  font-variant-ligatures: discretionary-ligatures;
}

.no-discretionary-ligatures {
  font-variant-ligatures: no-discretionary-ligatures;
}

Thank you for looking.