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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// Accessing in Blade File <style type="text/css"> @font-face { font-family: kantipur; src: url('{{ public_path('fonts/kantipur.tff') }}'); } // Accessing inside CSS file @font-face { font-family: kantipur; src: url('/fonts/kantipur.tff'); } </style> |
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.
|
1 2 3 4 5 6 |
// 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.
