Gatsby transform font-family in @font-face wrong

[item4]

Description

I want to use webfonts with Gatsby but I can not use it.

Steps to reproduce

1. clone this repo -> https://github.com/item4/kfonts-not-work-example
2. yarn start
3. open http://localhost:8000 in the browser
4. open inspector
5. select <h1> tag and view computed font (expected web, but local fonts loaded)

Expected result

Use webfonts and render like it

(You can read working code at https://github.com/item4/kfonts-work-example )

Actual result

Do not load webfont and use default fonts like it

Environment

Run gatsby info --clipboard in your project directory and paste the output here.

  System:
    OS: macOS 10.15.2
    CPU: (4) x64 Intel(R) Core(TM) i5-4258U CPU @ 2.40GHz
    Shell: 5.7.1 - /usr/local/bin/zsh
  Binaries:
    Node: 12.12.0 - ~/.nvm/versions/node/v12.12.0/bin/node
    Yarn: 1.21.1 - /usr/local/bin/yarn
    npm: 6.11.3 - ~/.nvm/versions/node/v12.12.0/bin/npm
  Languages:
    Python: 3.8.0 - /Users/item4/.pyenv/shims/python
  Browsers:
    Chrome: 79.0.3945.88
    Firefox: 71.0
    Safari: 13.0.4
  npmPackages:
    gatsby: ^2.18.12 => 2.18.17 

Additional informations

In develop mode, gatsby send me blob data, and I can see wrong font-family name like it.

localhost
@font-face {
  font-family: '\BC30\B2EC\C758\BBFC\C871   \B3C4\D604';
  src: url("http://localhost:8000/static/BMDOHYEON_ttf-fe79d68cfb163917c27f6fdb465da62f.eot");
  src: local('\BC30\B2EC\C758\BBFC\C871   \B3C4\D604   '),
       local('\BC30\B2EC\C758\BBFC\C871   \B3C4\D604'),
       url("http://localhost:8000/static/BMDOHYEON_ttf-fe79d68cfb163917c27f6fdb465da62f.eot?#iefix") format('embedded-opentype'),
       url("http://localhost:8000/static/BMDOHYEON_ttf-d297ff49de82cf1b93051fc641c7cb95.woff2") format('woff2'),
       url("http://localhost:8000/static/BMDOHYEON_ttf-10c2a689bbe1bfe5f05ae0e589c8192a.woff") format('woff'),
       url("http://localhost:8000/static/BMDOHYEON_ttf-9dbe9ac8eacbaa0f864d2087ea589c42.ttf") format('truetype'),
       url("http://localhost:8000/static/BMDOHYEON_ttf-8141156476020e9ea2dafc340b7fc384.otf") format('otf'),
       url("http://localhost:8000/static/BMDOHYEON_ttf-9faf4e9e39475e78965f58fc14e0492f.svg#BMDOHYEON_ttf") format('svg');
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

/*# sourceMapping

(skip)

*/

something make encode texts, but not correct. \BC30\B2EC\C758\BBFC\C871 \B3C4\D604 has three spaces( ) instead of \0020.

as like dev mode, production mode insert css code at html file. but there also same problem.

I guess some configuration of gatsby make it wrong.

[item4]

Happy new year! I want to bump it for fix it

[cometkim]

Hey @item4, I just investigate on this and this seems to be resolved after upgrading the css-loader package.

But there are some options have breaking change, I will file a PR for it soon. :)

[github-actions]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[github-actions]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.
Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜