Docusaurus build missing fonts

Question

I load the custom font with the location in the static/fonts folder, it works fine when in development mode ( docusaurus start ), but when I build ( docusaurus build ), the results show that the fonts I used are not loading, because the fonts folder is outside the static folder.

Folder structure when build

This is the snippet I made in the custom.css file

@font-face {
    font-family: 'Indonesiana';
    src: url('/static/fonts/Indonesiana.woff') format('woff'),
    url('/static/fonts/Indonesiana.svg#Indonesiana') format('svg'),
    url('/static/fonts/Indonesiana.eot'),
    url('/static/fonts/Indonesiana.eot?#iefix') format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
}

Thanks.

Answer 1

Just use relative paths and you will have a proper links upon build (assuming your css is in src/css):

 @font-face {
        font-family: 'Indonesiana';
        src: url('../../static/fonts/Indonesiana.woff') format('woff'),
        url('../../static/fonts/Indonesiana.svg#Indonesiana') format('svg'),
        url('../../static/fonts/Indonesiana.eot'),
        url('../../static/fonts/Indonesiana.eot?#iefix') format('embedded-opentype');
        font-weight: normal;
        font-style: normal;
    }

Answer 2

You should also add a font like this:

@font-face {
  font-family: "Indonesiana";
  src: url('/static/fonts/Indonesiana.woff') format('woff');
}

:root {
  --ifm-font-family-base: "Indonesiana"
}

There are other ways to do it for different modes, such as:

  --ifm-font-family-monospace: "Indonesiana";