Fonts with ligatures on the web

A project I am working on is using a font called Kocha which has these funky “ligatures”. A ligature is when two letters are jointed together to create a single “glyph”. For example, if you look at the Kocha font in the previous link then you’ll notice “K” underlining the “o”. Two letters but a single glyph.

By default these ligatures will be ignored when the font is used on the web. You have to enable them with the following CSS property.

font-variant-ligatures: common-ligatures;

This worked great in Chrome, Firefox, and Bing. However I found that I still wasn’t able to see the ligatures in Safari. You can fix this by also adding the following CSS property:

font-feature-settings: "liga" 1;

These should both be applied where ever you have set the font-family CSS property with your ligature font.

@font-face {
  font-family: 'Kocha Clean'; // this font uses 'font-variant-ligatures'
  src: url('../fonts/kocha-clean.woff2');
  src: url('../fonts/kocha-clean.woff2') format('woff'), url('../fonts/kocha-clean.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

%font-ligatures {
  font-variant-ligatures: common-ligatures;
  font-feature-settings: "liga" 1;
}

h1 {
  font-family: 'Kocha Clean';
  font-size: 5.625rem;
  font-weight: 400;
  @extend %font-ligatures;
}