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 https://laravel.com/docs/5.5/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.