Custom font not loading

Support
,
1

I am trying to put the custom font to load on my app.

It works locally but does not when it gets deployed to the netlify platform.

/* Implementation of Tailwind CSS */
@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
    font-family: 'GeoReg';
    src: url('/public/fonts/Geologica_Auto-Regular.ttf') format('truetype');
    font-weight: 500;
}

@font-face {
    font-family: 'GeoBold';
    src: url('/public/fonts/Geologica_Auto-Bold.ttf') format('truetype');
    font-weight: 700;
}

@font-face {
    font-family: 'GeoLight';
    src: url('/public/fonts/Geologica_Cursive-Light.ttf') format('truetype');
    font-weight: 300;
}

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

The actual folder structure is this:

testFolder
├─ .git
├─ .gitignore
├─ .vscode
│  └─ settings.json
├─ CODE_OF_CONDUCT.md
├─ CONTRIBUTING.md
├─ LICENSE
├─ package-lock.json
├─ package.json
├─ public
│  ├─ fonts
│  │  ├─ Geologica_Auto-Bold.ttf
│  │  ├─ Geologica_Auto-Regular.ttf
│  │  └─ Geologica_Cursive-Light.ttf
│  ├─ images
│  ├─ index.html
├─ src
│  ├─ App.css
│  ├─ App.js
│  ├─ App.test.js
│  ├─ assets
│  │  └─ styles
│  │     └─ index.css
│  ├─ components
│  │  ├─ Dashboard
│  │  │  ├─ Dashboard.css
│  │  │  └─ Dashboard.js
│  │  ├─ LandingPage
│  │  │  ├─ LandingPage.css
│  │  │  └─ LandingPage.js
│  │  ├─ Login
│  │  │  ├─ Login.css
│  │  │  └─ Login.js
│  │  ├─ PageNotFound
│  │  │  ├─ PageNotFound.css
│  │  │  └─ PageNotFound.js
│  │  └─ Register
│  │     ├─ Register.css
│  │     └─ Register.js
│  ├─ index.js
│  ├─ reportWebVitals.js
│  └─ setupTests.js
└─ tailwind.config.js
2

@codebydean It’s hard to tell what the precise issue is due to the limited information provided.

So some things to check are:

  1. Check what your Publish directory is set to as only the files in the Publish directory are deployed (e.g. I wouldn’t expect you can load /tailwind.config.js on your site)
  2. If your build copies the files in /public/ to whatever your Publish directory is, then the path to those files would be from / not from /public/ e.g. /fonts/Geologica_Auto-Bold.ttf

You can confirm if the issue truely is only occuring on Netlify by running your build command locally then hosting the files with npx serve.