Where do I place custom fonts in Laravel 5?
Solution 1
Place anything that the client browser should access into /public/
. You can use the Laravel helper function public_path
to build full URLs for it.
https://laravel.com/docs/5.2/helpers#method-public-path
For instance, if you put your font in /public/fonts/OptimusPrinceps.tff
(which you've done), you can access it one of two ways.
In Blade:
<style type="text/css">
@font-face {
font-family: OptimusPrinceps;
src: url('{{ public_path('fonts/OptimusPrinceps.tff') }}');
}
</style>
In CSS includes:
@font-face {
font-family: OptimusPrinceps;
src: url('/fonts/OptimusPrinceps.tff');
}
In the second example, you don't need any Laravel magic, really. Just reference the path absolutely so that it points to the correct directory.
Worth noting that this works with Bootstrap and SCSS. I usually put fonts in /public/static/fonts/
.
Solution 2
In webpack.mix.js
add
mix.copyDirectory('resources/assets/fonts', 'public/fonts');
Full doc here: https://laravel.com/docs/5.5/mix
Solution 3
In Laravel 5.4 in CSS, i had to add the /public
before the /fonts
folder for it to work. (for css included in a file)
`@font-face {
font-family: OptimusPrinceps;
src: url('/public/fonts/OptimusPrinceps.tff');
}`
An alternative which is the best way would be to use the assets()
helper function as below. The fonts folder should be in the public directory for this case. (for css in the head tag)
`<style>
@font-face {
font-family: OptimusPrinceps;
src: url('{{asset('/fonts/OptimusPrinceps.tff')}}');
}
</style>`
Solution 4
To add the public keyword when you including the custom font in laravel please add following:
supose font path is css/fonts/proxima-nova-light-59f99460e7b28.otf in public directory then use as
@font-face {
font-family: 'proxima-nova';
font-style: normal;
font-weight: 900;
src: url('../public/css/fonts/proxima-nova-light-59f99460e7b28.otf');
}
So you can use the ../public/+ font path in public directory. If you have any issue please tell me your font path I will update you path for that.
user3818418
Updated on August 09, 2020Comments
-
user3818418 almost 4 years
Complete beginner to Laravel 5 and trying to import 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 variables.scss. Currently my fonts are 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 doesn't load correctly.