@font-face not loading in react app (storybook)

Question

I am having trouble in loading fonts from local and I am pointing to the directory. Can someone help me with it ?

Here is my code

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

and using it as 
.btn {
  font-family: 'My font', sans-serif;
  max-width: 100%;
  width: 20%;
  height: 8%;
}

I am not getting any error when I load my application, sans-serif fonts are loading instead of My font. — Gangadhar Mullapudi, Aug 22 '19 at 15:06
When I build my app I am getting performance warnings from webpack — Gangadhar Mullapudi, Aug 22 '19 at 15:07
Assets: font/myfonts-Book.ttf (315 KiB) font/myfonts-Semibold.ttf (257 KiB) vendors~main.aa2cd040f0c1fba7504e.bundle.js (1.52 MiB) entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance. — Gangadhar Mullapudi, Aug 22 '19 at 15:09

score 0 · Answer 1 · answered Aug 22 '19 at 16:05

0

I suggest having a look at this

Also depending where you have them stored i.e. assets/fonts you must be pointing towards the directory.

font-face syntax

Example

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('☺︎'),
    url("GraublauWeb.woff") format("woff"),
    url("GraublauWeb.otf") format("opentype"),
    url("GraublauWeb.svg#grablau") format("svg");
}

answered Aug 22 '19 at 16:05

Cameron Shearer

142
1
10

I am using the same syntax forgot to wrap it in @font-face{.......} while posting here – Gangadhar Mullapudi Aug 22 '19 at 16:25

score 0 · Answer 2 · answered Aug 28 '19 at 19:41

0

I tried different things and finally able to find the issue. its the storybook web-pack config causing the issue. Instead of pushing module.rules to storybook default webpack config I overwrote rules and it worked.

answered Aug 28 '19 at 19:41

Gangadhar Mullapudi

93
3
7

score 0 · Answer 3 · answered Jan 04 '20 at 12:49

0

Have you use webpack file-loader to load a path, you dont have to specify where you font files reside. As long as you include your font files inside src/assets/fonts, file-loader will find it for you.

answered Jan 04 '20 at 12:49

Brendon

461
1
5
10

@font-face not loading in react app (storybook)

3 Answers3