Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Where do I place custom fonts in Laravel 5?

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.

like image 312
user3818418 Avatar asked May 01 '16 12:05

user3818418


People also ask

Where do I put custom fonts?

All fonts are stored in the C:\Windows\Fonts folder. You can also add fonts by simply dragging font files from the extracted files folder into this folder. Windows will automatically install them. If you want to see what a font looks like, open the Fonts folder, right-click the font file, and then click Preview.

How do I add fonts to laravel?

First, choose your fonts on fonts.google.com and grab the CSS URL. Next, install the package and publish the config file. Paste the CSS URL in the default font set.


1 Answers

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

like image 181
Josh Avatar answered Sep 18 '22 14:09

Josh