32

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.

2

4 Answers 4

41

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/.

3
  • The only issue I have now is this one: Not allowed to load local resource: file:///E:/MainWeb%20DesignProjectsLore%20Soulspublic/fonts/OptimusPrinceps.tff May 1, 2016 at 13:59
  • That's a browser cross-site exploit issue, not a Laravel one. You are accessing your application through a URL that doesn't allow your browser to load your own resources.
    – Josh
    May 1, 2016 at 14:08
  • You can put your fonts in your public folder
    – TheBAST
    Mar 18, 2017 at 7:48
20

In webpack.mix.js add

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

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

2
  • 2
    This should be the accepted answer. This is a much cleaner way than the accepted answer. Apr 19, 2020 at 22:09
  • 2
    Both answers are correct. The accepted answer and this one. I used both. Aug 27, 2020 at 15:12
8

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>`
3

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.