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>
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 ;)