Roots Discourse

Sage 10 -Fonts Not Compiling

I’ve noticed that with Sage 10 when you ‘build’ the fonts folder isn’t put in the public folder.

However, looking at my previous projects, it seems like it should.

What could the issue be?

It works. I took a woof font formatting and didn’t realise ttf font formating is different when it comes to importing etc…

This code fixed it, however, the font still didn’t compile to public folder, although it does seem to work on local dev at least.

// ==========================================================================
// # Fonts
// ==========================================================================
//
//
//  - Montserrat
//  - Nunito_Sans
//
//




// # Fonts: Montserrat
// ==========================================================================



@font-face {
    font-family: Montserrat;
    src: url('../../resources/fonts/Montserrat/Montserrat-Bold.ttf') format('truetype');
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: Montserrat;
    src: url('../../resources/fonts/Montserrat/Montserrat-Light.ttf') format('truetype');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}



// # Fonts: Nunito_Sans
// ==========================================================================


@font-face {
    font-family: Nunito Sans;
    src: url('../../resources/fonts/Nunito_Sans/NunitoSans-Bold.ttf') format('truetype');
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: Nunito Sans;
    src: url('../../resources/fonts/Nunito_Sans/NunitoSans-Light.ttf') format('truetype');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

Those files should be copied with the copyDirectory call in webpack.mix.js

And that function should maintain the folder structure:

https://laravel.com/docs/7.x/mix#copying-files-and-directories

I’ve always done that putting the font files directly in the fonts folder, without using subfolders.

Can you try that?

I had that commented. I think I did that because webpack copies the fonts and images which it shouldn’t, but yes.

Thanks! :slight_smile: