Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Gatsby transform font-family in @font-face wrong #20310

Closed
item4 opened this issue Dec 27, 2019 · 4 comments
Closed

Gatsby transform font-family in @font-face wrong #20310

item4 opened this issue Dec 27, 2019 · 4 comments

Comments

@item4
Copy link
Contributor

@item4 item4 commented Dec 27, 2019

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

image

(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

image

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

This comment has been minimized.

Copy link
Contributor Author

@item4 item4 commented Jan 8, 2020

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

@cometkim

This comment has been minimized.

Copy link
Member

@cometkim cometkim commented Jan 16, 2020

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

@cometkim cometkim removed their assignment Jan 22, 2020
@github-actions

This comment has been minimized.

Copy link

@github-actions github-actions bot commented Feb 12, 2020

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 github-actions bot added the stale? label Feb 12, 2020
@github-actions

This comment has been minimized.

Copy link

@github-actions github-actions bot commented Feb 22, 2020

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! 💪💜

@github-actions github-actions bot closed this Feb 22, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

2 participants
You can’t perform that action at this time.