Docusaurus not loading custom fonts

Question

My problem is that Docusaurus it is not loading custom fonts. I have the following structure:

website
│      
└───src
│   │   pages
│   │   ...
│   │
│   └───css
│       │  custom.css
│   
└───static
    │       
    └─── fonts
           │       
           └─── Poppins
                  │  Poppins-Regular.ttf
                  │  Poppins-Bold.ttf

I have the fonts inside ../static/fonts/Poppins/ folder and inside my css/custom.css i have the following code:

@font-face {
  font-family: 'Poppins-Regular';
  src: url('../../static/fonts/Poppins/Poppins-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Poppins-Bold';
  src: url('../../static/fonts/Poppins/Poppins-Bold.ttf') format('truetype');
}

:root {
  --ifm-color-primary: #2e32ae;
  --ifm-font-family-base: 'Poppins-Regular';
  --ifm-heading-font-family: 'Poppins-Bold';
  --ifm-font-family-monospace: 'Poppins-Regular';
}

When i rebuild my docusaurus project i have other font generated (maybe default one) which is shown but not the Poppins one.

I have read this issue and try everything in there. Also check and this one. But nothing helps.

Note: Interesting thing it is working when I import the font in custom.css file like

@import url('https://fonts.googleapis.com/css2family=Poppins:wght@400;700&display=swap');

But this doesn't help to me. I want to use it from a local folder.

score 0 · Answer 1 · edited Mar 21 '23 at 23:33

I used

@import url('https://fonts.googleapis.com/css2family=Poppins:wght@400;700&display=swap');

Then I noticed in the browser how Google fonts are loaded using the Network tab (F12 -> Network-Refresh the page -> See the fonts below into the Name section) the extension of the fonts was in 'woff2' format not in 'ttf' , then I downloaded the font with extension woff2 put it into my fonts folder then I added the code below:

@font-face {
  font-family: 'Poppins-Regular';
  src: url('../../static/fonts/Poppins/Poppins-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins-Bold';
  src: url('../../static/fonts/Poppins/Poppins-Bold.woff2') format('woff2');
}

:root {
  --ifm-color-primary: #2e32ae;
  --ifm-font-family-base: 'Poppins-Regular';
  --ifm-heading-font-family: 'Poppins-Bold';
  --ifm-font-family-monospace: 'Poppins-Regular';
}

And it was fixed. Issue can be closed.

Docusaurus not loading custom fonts

1 Answers1