Search code examples
htmlcssfontsligature

CSS font-spacing issue with Calibri and the letters "ti"


I'm starting a website build for a small business that uses Calibri as the primary font for their branding and I have come across an issue with using this font in certain web browsers.

In Google Chrome and Opera, the letters "ti" appear to be joined. When I apply some letter-spacing, they will not separate. This doesn't happen in Mozilla Firefox or Microsoft Edge.

Is there an issue with the font, or is it the browser? Is there anything I can do to fix it?

I've created a snippet for testing (or you can test at https://codepen.io/whitenoise83/pen/KyXWWL)

#site-title {
  font-family: Calibri, Candara, Segoe, "Segoe UI", Optima,  Arial, sans-serif !important; 
  color: #e00b00; 
  font-size: 6em; 
  font-weight: bold;
  /*letter-spacing: 0.25em;*/
}
<span id="site-title">Audiomation</span> 


Solution

  • Never seen that but after some search : Maybe a font ligature option to choose ?

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

    Hope its help ;)