CODEWITHSUNDEEP
laravelwebpacksassfontscompilation
Jeffrey van der Kruit
Jeffrey van der Kruit

Reputation: 57

Laravel 8 add downloaded fonts and use them

I just upgraded to laravel 8 and needed to build a website using fonts. I've downloaded the fonts and put them in the resources folder in a fonts folder. After that i added them to my css, but it doesn't seem to work. Am i missing a step, does it need to be compiled bij webpack first? What am i doing wrong?

Fonts: https://fontsgeek.com/fonts/Jot-Regular https://fonts.google.com/specimen/Roboto

style.scss:

@font-face {
    font-family: JotRegular;
    src: local('/fonts/JotRegular.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: Roboto;
    src: local('/fonts/Roboto-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}

h2{
    font-size: 2.2rem;
    font-family: JotRegular;
}

Upvotes: 1

Views: 6158

Answers (1)

Saeid Asadi
Saeid Asadi

Reputation: 739

Using local for loading fonts bypasses font compilation in webpack. So the fonts will not be automatically copied in to public folder and fonts must be copied manually in the proper path, Which is not recommended. To enable auto font manipulation you can use this:

@font-face {
    font-family: JotRegular;
    src: url('../fonts/JotRegular.ttf'); // remember that font file path must be relative to the current css file. not the final compiled folder
    font-weight: normal;
    font-style: normal;
}

This way webpack automatically copy font file to the final compiled directory in public. In addition automatic file version control will be take place this way.

Upvotes: 3

Related Questions