0

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>
Johannes
  • 64,305
  • 18
  • 73
  • 130
Reece
  • 777
  • 5
  • 22
  • 42

2 Answers2

3

You can use font-variant-ligatures: none; in your CSS to prevent the browser using special ligature characters for some combinations of characters/letters.

See also this article: http://www.cssportal.com/css-properties/font-variant-ligatures.php

#site-title {
  font-family: Calibri, Candara, Segoe, "Segoe UI", Optima,  Arial, sans-serif !important; 
  font-variant-ligatures: none;
  color: #e00b00; 
  font-size: 6em; 
  font-weight: bold;
  letter-spacing: 0.05em;
}
<span id="site-title">Audiomation</span>
Johannes
  • 64,305
  • 18
  • 73
  • 130
1

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

Jo44
  • 46
  • 8
  • Setting `font-variant-ligatures: none;` seems to have done the trick. Thanks to you and xs0's comment. – Reece Nov 16 '17 at 00:15
  • Since this was an easy one, I'm marking the answer that came in first as correct. I'd never experienced this ligature issue before - today I learned something new. Cheers! – Reece Nov 16 '17 at 00:23
  • I also learned something, maybe saved precious time in the future ^^ – Jo44 Nov 16 '17 at 00:33