Combinations of letters “fi” and “fl” is not displayed by browsers

Question

I have the following problem:

for my website I chose webfont 'Fira Sans Condensed' from Google Fonts (Latin, Latin Extended, Cyrillic, Cyrillic Extended). For generating font formats I have used Font Squirrel, which generated for me files with .woff and .woff2 extensions.

I include font with next css-code:

@font-face {
  font-family: 'firasanscondensed';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/firasanscondensed-regular.woff2') format('woff2'), url('../fonts/firasanscondensed-regular.woff') format('woff');
}

@font-face {
  font-family: 'firasanscondensed';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/firasanscondensed-bold.woff2') format('woff2'), url('../fonts/firasanscondensed-bold.woff') format('woff');
}

body {
  font-family: 'firasanscondensed', sans-serif;
}

My content displayed correctly except for combinations of letters "fi" and "fl". For example: "Wi-fi" dispays like "Wi- ".

To solve the problem I tried to include font with more font-extensions (.eot,.ttf) and in a different order, but situation has not changed.

Then I used Google Fonts method of including: <link href="https://fonts.googleapis.com/css?family=Fira+Sans+Condensed:400,700&amp;subset=cyrillic,cyrillic-ext,latin-ext" rel="stylesheet">. With this method my problem is solving! But for me it's in principle to include fonts locally.

I see the issue in the following browsers: Google Chrome 55.0.2883.87; Mozilla Firefox 51.0.1. In IE10 the problem does not appear!

Thank you in advance!

Answer 1

Try this against the element in which the fonts are rendering (or body).

body {  
  font-feature-settings: "liga" 1;
}

You might need vendor prefixes:

body  {
  -webkit-font-feature-settings: "liga" 1;
  -moz-font-feature-settings:    "liga" 1;
  -ms-font-feature-settings:     "liga" 1;
  font-feature-settings:         "liga" 1;
}

The features that can be toggled this way (if the font supports them) are..

• liga: standard ligatures
• dlig: discretionary ligatures
• onum: old style figures
• lnum: lining figures
• tnum: tabular figures
• zero: slashed zero
• frac: fractions
• sups: superscript
• subs: subscript
• smcp: small caps
• c2sc: small capitals from capitals
• case: case-sensitive forms
• hlig: historical ligatures
• calt: contextual alternates
• swsh: swashes
• hist: historical forms
• ss**: stylistic sets
• kern: kerning
• locl: localized forms
• rlig: required ligatures
• medi: medial forms
• init: initial forms
• isol: isolated forms
• fina: final forms
• mark: mark
• mkmk: mark-to-mark positioning

They can even be combined into one rule like this:

.element {
  font-feature-settings:"liga" 1, "dlig" 1;
}

Answer 2

Common ligatures are activated by default, but some fonts don't support them. Try to disable them with font-feature-settings:"liga" 0; This worked for me.