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.

Including two @font-face blocks in addRules throws error

See original GitHub issue

Expected behavior: I would expect an output of two @font-face rules added to the stylesheet.

Describe the bug: Having one @font-face rule in an addRules object outputs and injects the correct CSS. Adding a second @font-face rule throws this error:

Warning: [JSS] Can not insert an unsupported rule 

@font-face {
  font-family: "Font One";
  src: url("/fonts/font-one.woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Font Two";
  src: url("/fonts/font-two.woff");
  font-weight: normal;
  font-style: normal;
}

Codesandbox link: https://codesandbox.io/s/n5xn8y0vwl?expanddevtools=1

Versions (please complete the following information):

jss: 9.8.7
Browser: Chrome 69.0.3497.100
OS: Mac 10.14

Issue Analytics

State:
Created 5 years ago
Comments:12 (7 by maintainers)

Top GitHub Comments

1reaction

zhdanouskikhcommented, Oct 27, 2021

Any progress on this?

0reactions

kofcommented, Oct 28, 2021

I am not working on it, so if you like to fix it please send a PR and a test

Top Results From Across the Web

Error with multiple font-face declarations - css - Stack Overflow

The problem is that with this code not only this section, but the whole page is transforming to font-weight:light and I have no...

Add Rules to Stylesheets with JavaScript - David Walsh Blog

Use JavaScript to add rules to CSS stylesheets programmatically with addRule ... Media query-specific rules can be added in one of two ways....

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...

CSS Object Model (CSSOM) - W3C

CSSOM defines APIs (including generic parsing and serialization rules) for ... If nothing was removed, then throw a NotFoundError exception.

CSS - Test Your CSS Skills Number 35 - inline-block - HTML & CSS ...

count me out for the second part. but i do want to read about it ... didn't expect it to be so simple...