Where can I place custom fonts in Laravel 5?

Question

Fill out new to Laravel 5 and try importing custom fonts using this code in my header:

<style> @font-face { font-family: 'Conv_OptimusPrinceps'; src: url('fonts/OptimusPrinceps.eot'); src: local('☺'), url('fonts/OptimusPrinceps.woff') format('woff'), url('fonts/OptimusPrinceps.ttf') format('truetype'), url('fonts/OptimusPrinceps.svg') format('svg'); font-weight: normal; font-style: normal; } 

and calling it in my .scss variables. My fonts are currently stored in my public directory:

 public/fonts/OptimusPrinceps.woff public/fonts/OptimusPrinceps.tff etc. 

For some reason this warning appears in my dev tools

 Failed to decode downloaded font: http://localhost:3000/fonts/OptimusPrinceps.tff OTS parsing error: invalid version tag 

And my font is not loading correctly.

Answer 1

Put everything the client browser should access in /public/ . You can use the Laravel helper function public_path to create full URLs for it.
https://laravel.com/docs/5.2/helpers#method-public-path

For example, if you put your font in /public/fonts/OptimusPrinceps.tff (which you made), you can access it in one of two ways.

In a click:

 <style type="text/css"> @font-face { font-family: OptimusPrinceps; src: url('{{ public_path('fonts/OptimusPrinceps.tff') }}'); } </style> 

In CSS there are:

 @font-face { font-family: OptimusPrinceps; src: url('/fonts/OptimusPrinceps.tff'); } 

In the second example, you really don't need Laravell's magic. Just specify the path absolutely so that it points to the correct directory.

It is worth noting that this works with Bootstrap and SCSS. I usually put fonts in /public/static/fonts/ .

Answer 2

In Laravel 5.4 in CSS, I had to add /public to the /fonts folder to make it work.

@font-face { font-family: OptimusPrinceps; src: url('/public/fonts/OptimusPrinceps.tff'); }

Answer 3

To add a public keyword if you included a custom font in laravel, add the following:

Assume the font path is: css / fonts / proxima-nova-light-59f99460e7b28.otf in the public directory, then use

 @font-face { font-family: 'proxima-nova'; font-style: normal; font-weight: 900; src: url('../public/css/fonts/proxima-nova-light-59f99460e7b28.otf'); } 

This way you can use the ../public/ + path in the public directory. If you have any problems, please tell me your font path. I am updating you the way for this.

Answer 4

In webpack.mix.js add

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

Full document here: https://laravel.com/docs/5.5/mix