Importing custom fonts in Laravel 8

0
votes

I'm trying to load custom fonts to my project using Laravel 8 (mix) but don't know what's wrong with my process. Whenever I'm trying to use the font with my scss the font seems not working.

Here's what my directory tree looks like atm:

My Public Directory

public

  • assets
    • css
    • js
  • css
    • app.css
  • js
    • app.js

My Resources Directory

resources

  • fonts
    • opensans.ttf
  • sass
    • app.scss

Now the app.scss contains the following

$font-path: "../fonts";
@font-face {
    src: url("#{$font-path}/OpenSans-Regular.ttf") format("ttf");
    font-family: "OpenSans";
}

I even tried putting the fonts inside public folder but it didn't work, also I tried importing the font from google fonts it didn't work too.

1
laravelsassfontslaravel-mix
Did you check your Chrome console for any errors ? You should have your fonts in public directory, like public/fonts/opensans.ttf. – matiaslauriti
There's no error in console. I tried it also but it didn't work in loading the fonts to my css. – Nigel
Then do this, try to find the css file in the sources tab, and then see what the final URL is. Also, see that you are using OpenSans-Regular.ttf when you wrote you have opensans.ttf in your fonts folder... – matiaslauriti
copy, sorry still a newbie but will try it thanks bud. – Nigel

1 Answers

2
votes

You need to add a rule copy folder with fonts in laravel.mix.js to public/fonts

mix.copy('resources/fonts', 'public/fonts');