Import custom fonts in laravel


During the development process, we sometimes need to add our custom fonts. For example, I had to develop a government website that should be in Nepali. So, I had to import custom fonts. Importing fonts is easy in laravel. Here we implement 2 methods i.e. using laravel-mix and without using laravel-mix.

Without laravel-mix

If we don’t want to use laravel-mix, we can directly place custom fonts in public/fonts/ directory and access in our css or blade file.

// Accessing in Blade File

Using Laravel Mix

Laravel Mix provides a fluent API for defining webpack build steps for your application using several common CSS and JavaScript pre-processors. As defined, we can manage all our assets i.e. javascript, CSS, fonts using laravel mix. For this, we only need to edit our webpack.mix.js file on root directory.

// webpack.mix.js
// resources/assets/fonts directory contains our fonts file
// copyDirectory helps to copy all the files with directory structure
// then we can import our custom fonts as in above mentioned method in blade or css file

mix.copyDirectory('resources/assets/fonts', 'public/fonts');

If you have any comments, please drop in the comment section below.

Read More Articles


Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.