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.

CSS - font-face with multiple urls

See original GitHub issue

Original:

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

Formatted:

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

Expected (break after comma all the way till ;):

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

Issue Analytics

State:
Created 6 years ago
Reactions:7
Comments:6 (4 by maintainers)

Top GitHub Comments

1reaction

thorn0commented, Feb 14, 2020

@kachkaev Increase --print-width to see the issue:

Prettier 1.19.1 Playground link

--parser css
--print-width 100

Input:

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

Output:

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

0reactions

alexander-akaitcommented, Aug 11, 2020

Other example:

input

@font-face {
  font-family: 'common-iconfont';
  src: url('//at.alicdn.com/t/font_940408_1r71t42ct7i.eot');
  src: url('//at.alicdn.com/t/font_940408_1r71t42ct7i.eot?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_940408_1r71t42ct7i.woff2') format('woff2'),
    url('//at.alicdn.com/t/font_940408_1r71t42ct7i.woff') format('woff'),
    url('//at.alicdn.com/t/font_940408_1r71t42ct7i.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_940408_1r71t42ct7i.svg#iconfont') format('svg');
}

output

@font-face {
  font-family: "common-iconfont";
  src: url("//at.alicdn.com/t/font_940408_1r71t42ct7i.eot");
  src: url("//at.alicdn.com/t/font_940408_1r71t42ct7i.eot?#iefix")
      format("embedded-opentype"),
    url("//at.alicdn.com/t/font_940408_1r71t42ct7i.woff2") format("woff2"),
    url("//at.alicdn.com/t/font_940408_1r71t42ct7i.woff") format("woff"),
    url("//at.alicdn.com/t/font_940408_1r71t42ct7i.ttf") format("truetype"),
    url("//at.alicdn.com/t/font_940408_1r71t42ct7i.svg#iconfont") format("svg");
}

expected

@font-face {
  font-family: 'common-iconfont';
  src: url('//at.alicdn.com/t/font_940408_1r71t42ct7i.eot');
  src: url('//at.alicdn.com/t/font_940408_1r71t42ct7i.eot?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_940408_1r71t42ct7i.woff2') format('woff2'),
    url('//at.alicdn.com/t/font_940408_1r71t42ct7i.woff') format('woff'),
    url('//at.alicdn.com/t/font_940408_1r71t42ct7i.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_940408_1r71t42ct7i.svg#iconfont') format('svg');
}

Top Results From Across the Web

If multiple sources are listed in an @font-face, are all of them ...

Multiple @font-face rules can be used to construct font families with a variety of faces. Using CSS font matching rules, a user agent...

How to use @font-face in CSS

The @font-face rule allows custom fonts to be loaded on a webpage. Once added to a stylesheet, the rule instructs the browser to...

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

Chrome Edge @font‑face Full support. Chrome1. Toggle history Full support... OpenType CBDT and CBLC rendering Full support. Chrome66. Toggle history Full support... OpenType COLRv0 rendering Full...

Using multiple font files the right way - HackSoft

Having multiple font files for a single font can lead to a messy css if you don't know how to use them all...

How to Setup Custom Fonts with CSS & @font-face

Step 1: Get all the font files you need for cross-browser support · Step 2: Add the font files to your project ·...