Description
I want to use webfonts with Gatsby but I can not use it.
Steps to reproduce
- clone this repo -> https://github.com/item4/kfonts-not-work-example
- yarn start
- open http://localhost:8000 in the browser
- open inspector
- 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.
Description
I want to use webfonts with Gatsby but I can not use it.
Steps to reproduce
<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 --clipboardin your project directory and paste the output here.Additional informations
In develop mode, gatsby send me blob data, and I can see wrong font-family name like it.
something make encode texts, but not correct.
\BC30\B2EC\C758\BBFC\C871 \B3C4\D604has three spaces(\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.