When creating a website, it is not uncommon for us to change the font used. Usually to make it easier we will use google fonts, besides being free the font choices are also many. However, it does not rule out the possibility that we want to use fonts that are not available in google fonts. For example, we already have the font we want and want to use that font on our website. Well, in this article we will discuss how to use local fonts in Laravel.

Preparation

Make sure you already have a laravel project installed on your computer. If not, you can create a laravel project in the following way:

1

composer create-project --prefer-dist laravel/laravel name_project

Make sure you have the font you want to use. The font to be used must be a font made for the web. Web fonts are fonts that are specifically created to be applied to text on web pages. The browser downloads the specified web font when rendering the web page and applies the font to the text on the page. Usually web fonts have the extension .woff or .woff2.

Adding Fonts

Once you have the font you want to use, the next step is to add the font to your Laravel project. It’s quite easy, you just need to create a fonts folder in the resource folder of your laravel project. Then move the font folder or file you want to use into the fonts folder. Here’s the folder structure of your laravel project:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

project_laravel
├── resources
│ ├── fonts
│ ├── font1.woff
│ │ ├── font1.woff2
│ │ ├── font2.woff
│ └── font3.woff
│ │ └── MyFont
│ │ ├── MyFont-Bold.woff
│ │ ├── MyFont-BoldItalic.woff
│ │ ├── MyFont-Italic.woff

Using Fonts

After you have added fonts to your Laravel project, the next step is to use the fonts. To use the font, you can add css that contains the font declaration. We can add it to the resources/css/app.css file or the css file you use. Here’s an example of a font declaration in a css file:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

@font-face {
    font-family: 'MyFont';
    src: url('../fonts/MyFont/MyFont-Bold.woff') format('woff'),
         url('../fonts/MyFont/MyFont-BoldItalic.woff') format('woff'),
         url('../fonts/MyFont/MyFont-Italic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/* or */
@font-face {
    font-family: "MyFont";
    src: url("../fonts/font1.woff2") format("woff2"),
        url("../fonts/font1.woff") format("woff");
    font-weight: 200;
    font-style: normal;
}

Once you have added the font declaration, add the following line to the resources/js/app.js file:

1
2
3

import.meta.glob([
    '../fonts/**',
  ]);

The code above serves to load the font file in the fonts folder into your laravel project.

Run the following command to compile your css and js files:

1
2
3

npm run dev
# or
npm run build

After that, you can use the font in your laravel project. For example you want to use the font in your css file:

1
2
3

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

Conclusion

By using local fonts, we can use the fonts we want on our website. That way, we can be more flexible in designing our website according to our wishes. Hopefully this article is useful and good luck!