Activating Font Ligatures

Can’t see your custom font’s ligatures? You might have to activate them with this CSS:

 
h1, h2, h3, h4 {
  font-family: 'FONT NAME HERE' !important;
  font-variant-ligatures: common-ligatures !important;
  -moz-font-feature-settings: "liga" !important;
  -webkit-font-feature-settings: "liga" !important;
  font-feature-settings: "liga" !important;
}

Remember to:

  • Replace ‘FONT NAME HERE’ with your font-family-name

  • Apply these to various selectors (h1, h2, h3, product titles, etc)

Before

After

 

FAQ

I tried this and it still doesn’t work!

  1. Check that the font actually includes ligatures or glyphs.

  2. Check that you’ve uploaded both the OTF and WOFF font files. Since “font-variant-ligatures” and “font-feature-settings” are CSS properties that control advanced typographic features in OpenType (OTF) fonts, it’s important to have the OTF file uploaded too. Learn more about this here.

  3. Contact the font designer — if all else fails, email the designer and ask for their help. You might need to do something different!

Code SnippetsSuki ChanSection 3 - Custom Sites