How to Add a Custom Font to Your Laravel Project

There may be occasions when you have to use a custom font, such as a brand font, in your Laravel Project. I’m going to go through the steps for adding a custom font to your project.

In this example, I’m using the Laravel Starter kit with Livewire, but it should also work with React and Vue starter kits.

1. In your Laravel application directory, create a new folder in resources called fonts. Once created, add your fonts to that folder.
2. Open the resources/js/app.js file and place the code below. The code makes Vite aware that we have our fonts installed.

import.meta.glob([

'../fonts/**',

]);

3. We now need to import the font into a stylesheet. In the following file, resources/css/app.css, use the font-face rule and replace FONTNAME with the name of your font.

@font-face {
    font-family: 'FONTNAME';
    src: url('../fonts/FONTNAME.woff2') format('woff2'),
         url('../fonts/FONTNAME.otf') format('otf');
    font-weight: normal;
    font-style: normal;
}

4. I’m using Tailwindcss with the font installed in our application. We are going to create a new utility for our new font. Under the theme layer where your custom Taillwind settings are saved, add the following.

    --font-FONTNAME: 'FONTNAME', sans-serif;

5. With that all added, go to your template, add the font to the required selector, and the page will render it correctly.

<h1 class="font-FONTNAME text-3xl">Hello World</h1>

That’s how to add a custom font to a Laravel application If you want to read more about this you go to the Laravel documentation – Processing Static Assets With Vite