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;
    }