-1

The goal is to remove the bold letters from fl and fi in the text

enter image description here chrome 61

I was able to reproduce the issue in this codepen:

https://codepen.io/jossnaz/pen/vWgEGB

basically fira sans not applying any letter-spacing to the chars and they chars are bold. No idea why.

this is how it looks on firefox 56: enter image description here

Toskan
  • 13,911
  • 14
  • 95
  • 185
  • 1
    What browser are you using for the letter spacing? In Firefox it looks fine. Also, they aren't separating (without increased letter spacing) because it could be a typographic ligature and built into the font. https://en.wikipedia.org/wiki/Typographic_ligature – disinfor Nov 09 '17 at 03:57
  • well but on the page I linked, they look bolder as well. I don't mind soo much them sticking together. Even though I actually do mind. but that they are bold as well? I could reproduce in both, chrome and firefox. – Toskan Nov 09 '17 at 04:56
  • 1
    Related: [Combinations of letters “fi” and “fl” is not displayed by browsers](https://stackoverflow.com/q/42269783/1016716) and [How to correct the ligatures of 'fi' and 'fl' in case of larger letter-spacing?](https://stackoverflow.com/q/42934280/1016716) – Mr Lister Nov 09 '17 at 09:45
  • @MrLister none of those seem to work for me. Still bold – Toskan Nov 09 '17 at 18:54

1 Answers1

6

There is a CSS attribute designed for controlling how ligatures are generated automatically by browsers.

Try adding:

font-variant-ligatures: none;

to your paragraph element.

See this codepen: https://codepen.io/jossnaz/pen/vWgEGB

For the issue where you want to control character spacing, and your source text is composed like "truffle shuffle" with separate F and L characters, this will prevent the browser from generating ligatures and apply spacing as you'd probably expect.

However, this is not the only issue you are running into in your site!

In your page, the text is actually using the Unicode fi and fl ligature characters (U+FB01 and U+FB02). The browser will not separate these back into separate characters, and they are not included by the Google Fonts API. This is possibly some plugin in your CMS automatically converting ligatures, or perhaps the result of copying and pasting from an editor.

See: https://codepen.io/anon/pen/mqmLLZ for an example of this.

These ligature characters are not included in the webfont - the Latin ligatures are at U+FB00-FB06 and either the font or Google's Font API doesn't include them. As a result, they are switching to the fallback font, which in this case is specified as the generic sans-serif - probably Arial or Helvetica. They're not bold per se, but they're heavier than Fira Sans.

kibibu
  • 6,115
  • 1
  • 35
  • 41
  • You had a link in the bounty to your site, I used the Chrome dev tools to add the font-variant-ligatures attribute to an element, and there was no change. So I looked at the source and the ligatures existed in the plain text representation. – kibibu Nov 13 '17 at 00:21
  • just for completeness here is a unicode fl: `flagged` you can notice because you can only select `fl` together. You cannot only select `f` or `l` – Toskan Nov 13 '17 at 00:24
  • Additionally, the ligature characters may in fact be in the font, but Google appears to have pre-trimmed their fonts to fixed Unicode ranges, excluding the ligature characters.If you have the font installed locally it might actually look ok. – kibibu Nov 13 '17 at 00:28