Warning: Failed to decode downloaded font warnings after building a React App (Vite)

Question

I encountered numerous warning messages on my console when I built my application. However, these warnings are not rendering during local development.

Failed to decode downloaded font

Total of 1242 warnings

Perhaps it has something to do with my local font imports. In my setup, I have a directory that looks like this:

/my-app
   /public
      /fonts -- this is my target directly and all my fonts are here
   /resources -- reactJS directory
      /fonts -- fonts used in local development
      /scss

Here's my font import inside my scss file

@font-face {
    font-family: 'HelveticaNeue';
    src: url('../fonts/helvetice-nueue/HelveticaNeueLight.eot');
    src: url('../fonts/helvetice-nueue/HelveticaNeueLight.eot?#iefix') format('embedded-opentype'),
        url('../fonts/helvetice-nueue/HelveticaNeueLight.woff2') format('woff2'),
        url('../fonts/helvetice-nueue/HelveticaNeueLight.woff') format('woff'),
        url('../fonts/helvetice-nueue/HelveticaNeueLight.ttf') format('truetype'),
        url('../fonts/helvetice-nueue/HelveticaNeueLight.svg#HelveticaNeueLight') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

I am using Vite with React and Laravel. Here's my setup inside vite.config

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/js/index.jsx',
            ],
            refresh: true,
        }),
        react(),
    ],
});

When building, I noticed that the linter also produces these warnings (all of my font type imports have these warnings).

../fonts/helvetice-nueue/HelveticaNeueMedium_1.eot referenced in /var/www/sites/my-2023-app/resources/js/components/FreeGiftItem/FreeGiftCheckoutItem.scss didn't resolve at build time, it will remain unchanged to be resolved at runtime

Answer 1

ok, i suggested you use absolute path in your code.

The vite dev-server runs a bit different. Where valet serves from your /public/ diretory; the dev-server runs from the project root.
So referencing the full path starting from the root dir of your project should work.

this is copy answer from: link

so:

@font-face {
    font-family: 'HelveticaNeue';
    src: url('/resources/fonts/helvetice-nueue/HelveticaNeueLight.eot');
    src: url('/resources/fonts/helvetice-nueue/HelveticaNeueLight.eot?#iefix') format('embedded-opentype'),
        url('/resources/fonts/helvetice-nueue/HelveticaNeueLight.woff2') format('woff2'),
        url('/resources/fonts/helvetice-nueue/HelveticaNeueLight.woff') format('woff'),
        url('/resources/fonts/helvetice-nueue/HelveticaNeueLight.ttf') format('truetype'),
        url('/resources/fonts/helvetice-nueue/HelveticaNeueLight.svg#HelveticaNeueLight') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

or (if you copied fonts to public directory):

@font-face {
    font-family: 'HelveticaNeue';
    src: url('/pulic/fonts/helvetice-nueue/HelveticaNeueLight.eot');
    src: url('/pulic/fonts/helvetice-nueue/HelveticaNeueLight.eot?#iefix') format('embedded-opentype'),
        url('/pulic/fonts/helvetice-nueue/HelveticaNeueLight.woff2') format('woff2'),
        url('/pulic/fonts/helvetice-nueue/HelveticaNeueLight.woff') format('woff'),
        url('/pulic/fonts/helvetice-nueue/HelveticaNeueLight.ttf') format('truetype'),
        url('/pulic/fonts/helvetice-nueue/HelveticaNeueLight.svg#HelveticaNeueLight') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

Answer 2

1. This issue may occur due to permission issues, please check the folder you save the font files are granted permission (Make sure it's not restricted).
2. Please check the local run with differant browsers and make sure in all browsers it's rendering the issue if yes,

please try with a absulute path of the font file and make sure the path is correct of all the font files. and check font folder is in the correct location from the location where your CSS file is located.

@font-face {
    font-family: 'HelveticaNeue';
    src: url('./resources/fonts/helvetice-nueue/HelveticaNeueLight.eot');
    src: url('./resources/fonts/helvetice-nueue/HelveticaNeueLight.eot?#iefix') format('embedded-opentype'),
        url('./resources/fonts/helvetice-nueue/HelveticaNeueLight.woff2') format('woff2'),
        url('./resources/fonts/helvetice-nueue/HelveticaNeueLight.woff') format('woff'),
        url('./resources/fonts/helvetice-nueue/HelveticaNeueLight.ttf') format('truetype'),
        url('./resources/fonts/helvetice-nueue/HelveticaNeueLight.svg#HelveticaNeueLight') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}