Failed to load resource (fonts not showing)

Hi everyone,

I hope someone has an answer to this, as I can’t seem to resolve it.

I’m working on a Laravel project and have deployed it, but the font is missing. I’ve tried various solutions, including starting a brand new project, but the same issue keeps appearing.

On the live project (local), the error I get is: [Error] Failed to load resource: the server responded with a status of 500 (Internal Server Error) (Nuckle-Bold.woff, line 0)

On the new project, the error is a 404 status instead of 500. What’s even stranger is that in Chrome and Firefox, the font displays correctly, but not in Safari. (But the error stays in Chrome and Firefox)

The font path is located in public/fonts/...

Thanks in advance for your help! Shane

Here’s what the new project setup looks like:

Blade

    <title>Laravel</title>

    <!-- Styles / Scripts -->
    @if (file_exists(public_path('build/manifest.json')) || file_exists(public_path('hot')))
        @vite(['resources/scss/app.scss', 'resources/css/app.css', 'resources/js/app.js'])
    @else
    @endif

</head>
<body>
    <div class="box">
        hello
    </div>
</body>

app.scss

@font-face {
    font-family: 'Nuckle';
    src: local('Nuckle Thin'), local('Nuckle-Thin'),
        url('public/fonts/Nuckle-Thin.woff2') format('woff2'),
        url('public/fonts/Nuckle-Thin.woff') format('woff'),
        url('public/fonts/Nuckle-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}


body {
    font-family: 'Nuckle', sans-serif;
}

.box {
    width: 300px;
    height: 300px;
    background: red;
    color: white;
    font-size: 50px;
}

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/scss/app.scss', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

Sinnbeck

1 year ago

Level 102

I don't assume you have public in the url so it should be here either

url('public/fonts/Nuckle-Thin.woff2')
//fix
url('/fonts/Nuckle-Thin.woff2')

Mega_Aleksandar

1 year ago

Best Answer

Level 18

Hi there, I had a similar issue with local vs production environments. The main issue lies in how vite translates the urls in dev mode vs prod mode. You have to make sure that vite knows where to look for or rather how to "build" the absolute/relative paths. With the 2 css files and vite config I managed to resolve the issue - it might not be the prettiest, but it works.

//style-dev.css
@font-face {
  font-family: "BrandonGrotesque";
  src: url('public/assets/fonts/BRANDONGROTESQUE-REGULAR.OTF') format("opentype");

//style-prod.css
@font-face {
  font-family: "BrandonGrotesque";
  src: url('../assets/fonts/BRANDONGROTESQUE-REGULAR.OTF') format("opentype");

// vite.config.js
export default defineConfig(({command, mode})=>{
  const envs = loadEnv(mode, process.cwd());

  const base = envs.VITE_BASE_PATH; 
  const origin = process.env.NODE_ENV === 'production' ? envs.VITE_BASE_PATH : "http://" + envs.VITE_DOMAIN + ":5173"; 
  const host = envs.VITE_DOMAIN;
  const app_container = envs.VITE_APP_CONTAINER;

where the envs are loaded from the .env file (.env for dev, .env.staging for staging, .env.prod for prod)

Make sure you completely match the url path especially if your project is nested in a directory (aka. not in the public_html or something).

Hope this helps.

1 like

Merklin

1 year ago

Level 7

I have implemented custom font, with a bit of a different and I can say reliable approach, with following structure:

- resources
---fonts
	--nunito
	--font.css

All my .woff2 font files are inside the nunito folder, and in font.css I have:

/* cyrillic */
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400;
    src: url('nunito/XRXV3I6Li01BKofIMeaBXso.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400;
    src: url('nunito/XRXV3I6Li01BKofIO-aBXso.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
        U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

Then, in my app.css I just import this CSS file via @import 'fonts/fonts.css';

1 like

SvH-Shane

1 year ago

Level 1

Hi all! Thanks for the solutions. Both options worked out well!

Thank you very- very- very much!

Please or to participate in this conversation.