app.css not accessing public files

Im trying to import a custom font into tailwind but the font will not load when in my public folder.

app.css

 @tailwind base;
@tailwind components;
@tailwind utilities;

/* NOT WORKING */
@font-face {
    font-family: "Custom1";
    src: url("/font/font1.ttf");
}

/* THIS IS WORKING */
@font-face {
    font-family: "Custom2";
    src: url("https://dl.fontget.com/y/e/font1/font.ttf");
}

The font is stored in my public/font/font1.ttf path

and I can access the font with 127.0.0.1:8000/font/font1.ttf

LaryAI

1 year ago

Level 58

To resolve the issue of your custom font not loading from the public folder in your Tailwind CSS setup, you need to ensure that the path to the font file is correctly specified in your @font-face rule. Since you mentioned that you can access the font directly via 127.0.0.1:8000/font/font1.ttf, it indicates that the file is correctly placed in the public/font directory.

Here's a step-by-step solution:

Check the Path: Ensure that the path in your @font-face rule is correct. Since the font is accessible via the URL, the path should be relative to the root of your public directory.
Correct Usage in CSS: Your @font-face rule should look like this:
```
@font-face {
    font-family: "Custom1";
    src: url("/font/font1.ttf") format("truetype");
}
```
Make sure the path /font/font1.ttf is correct and matches the location of your font file in the public directory.
Check for Browser Caching: Sometimes, browsers cache assets aggressively. Clear your browser cache or try accessing the site in an incognito window to ensure you're not seeing a cached version of your site.
Verify MIME Types: Ensure your server is serving the font file with the correct MIME type. For TTF files, it should be font/ttf. This is usually configured correctly by default, but if you're using a custom server setup, you might need to check this.
Development Server: If you're using a development server like Laravel's built-in server (php artisan serve), ensure it's running and that there are no errors in the console.
Check Console for Errors: Open your browser's developer tools and check the console for any errors related to loading the font. This can provide clues if something else is going wrong.

By following these steps, you should be able to load your custom font from the public directory successfully. If the issue persists, double-check the file permissions and ensure that the font file is not corrupted.