Laravel Question posted in
The official Laravel Documentation can be found here.

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

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
Tags:

2

Answers


  1. 0

    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;
}
    Login or Signup to reply.
  2. 0
    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;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search