Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

font-face fallback order

See original GitHub issue

Example:

'@font-face': {
    fontFamily: '"icon-fonts"',
    src: `url(/assets/fonts/icon-fonts.eot)`,
    fallbacks: [
      { src: `url(/assets/fonts/icon-fonts.eot?#iefix) format(embedded-opentype)` },
      { src: `url(/assets/fonts/icon-fonts.ttf) format(truetype)` },
      { src: `url(/assets/fonts/icon-fonts.svg#icon-fonts) format(svg)` },
      { src: `url(/assets/fonts/icon-fonts.woff) format(woff)` },
      { src: `url(/assets/fonts/icon-fonts.woff2) format(woff2)` },
    ],
    fontWeight: 'normal',
    fontStyle: 'normal',
}

Expected:

@font-face {
  font-family: "icon-fonts";
  src: url(/assets/fonts/icon-fonts.eot);  
  src: url(/assets/fonts/icon-fonts.eot?#iefix) format(embedded-opentype),
     url(/assets/fonts/icon-fonts.ttf) format(truetype),
     url(/assets/fonts/icon-fonts.svg#icon-fonts) format(svg),
     url(/assets/fonts/icon-fonts.woff) format(woff),
     url(/assets/fonts/icon-fonts.woff2) format(woff2);
  font-weight: normal;
  font-style: normal;
}

Received:

@font-face {
  src: url(/assets/fonts/icon-fonts.eot?#iefix) format(embedded-opentype);
  src: url(/assets/fonts/icon-fonts.ttf) format(truetype);
  src: url(/assets/fonts/icon-fonts.svg#icon-fonts) format(svg);
  src: url(/assets/fonts/icon-fonts.woff) format(woff);
  src: url(/assets/fonts/icon-fonts.woff2) format(woff2);
  font-family: "icon-fonts";
  src: url(/assets/fonts/icon-fonts.eot);
  font-weight: normal;
  font-style: normal;
}

due to fallback goes first, browser does not load fonts properly

Issue Analytics

State:
Created 5 years ago
Comments:22 (8 by maintainers)

Top GitHub Comments

1reaction

kofcommented, Apr 11, 2019

Array syntax is already used for complex values, that’s why we have fallbacks syntax in the first place, it was intentional. Let’s try fixing the examples

1reaction

kofcommented, Sep 6, 2018

I think you need to reverse the order of what you consider to be a fallback. CSS will fall back to a previously defined property if the next one fails.

a {
  color: fallback;
  color: unsupported
}

So fallback properties should always be defined first.

Second point: you want a src property with multiple values, comma separated. This is also supported:

{
  '@font-face': {
      fontFamily: '"icon-fonts"',
      src: `url(/assets/fonts/icon-fonts.eot)`,
      fallbacks: {
        src: [
          `url(/assets/fonts/icon-fonts.eot?#iefix) format(embedded-opentype)`, 
          `url(/assets/fonts/icon-fonts.ttf) format(truetype)`, 
          `url(/assets/fonts/icon-fonts.svg#icon-fonts) format(svg)`,
          `url(/assets/fonts/icon-fonts.woff) format(woff)`,
          `url(/assets/fonts/icon-fonts.woff2) format(woff2)`
          ] 
      },
      fontWeight: 'normal',
      fontStyle: 'normal',
  }

}

Top Results From Across the Web

Adding fallback fonts to the @font-face definition - css

No, you cannot specify any fallback fonts inside a @font-face rule, because such a rule defines a font face and assigns a name...

CSS Font Fallbacks - W3Schools

Below are some commonly used font fallbacks, organized by the 5 generic font families: Serif; Sans-serif; Monospace; Cursive; Fantasy. Serif Fonts. font-family ......

font-display - CSS: Cascading Style Sheets - MDN Web Docs

font-display ; Font block period. If the font face is not loaded, any element attempting to use it must render an invisible fallback...

CSS Basics: Fallback Font Stacks for More Robust Web ...

The whole idea here is fallbacks. The browser will try to use the font you specified first (Lato, in this case), but if...

Which fallback fonts should we choose to make FOUT less ...

So I go with Verdana as the first fallback font, followed by the generic sans-serif . According to the Font Family Reunion, this...