CODEWITHSUNDEEP
phpcsslaravelfonts
Tom Morison
Tom Morison

Reputation: 582

laravel - linking to custom fonts

I have already asked and played around with this question on Laravel discussions here (https://laracasts.com/discuss/channels/code-review/linking-to-custom-font-file-from-a-stylesheet-inside-a-blade-template). moving the file back to the stylesheet and removing the asset in the link the did not. I am trying to import custom fonts into my website, but because of Laravel's router, I can't directly link to the font files in my CSS. how can I get my custom fonts to display in the browser? So far, this dosent work: 

 @font-face { font-family: NexaBold; src: url('{!! asset('build/fonts/NexaBold.otf') !!}'); }

@font-face { font-family: NexaLight; src: url('{!! asset('build/fonts/NexaLight.otf') !!}'); }

@font-face { font-family: OpenSans; src: url('{!! asset('build/fontsOpenSans-Regular.ttf') !!}'); }

I tried replacing asset with public_path but that didn't work either. How do I get my fonts to display using the Laravel blade engine?

Upvotes: 1

Views: 10194

Answers (1)

Davide Casiraghi
Davide Casiraghi

Reputation: 18087

You can put your fonts in this directory /storage/app/public/fonts, so they can be accessible from the frontend:

This is how you can import them:

@font-face {
        font-family:'NexaBold';
        src: url('/fonts/NexaBold.otf') format('otf');
        font-style: normal;
        font-weight: normal;
    }
@font-face {
        font-family:'NexaLight';
        src: url('/fonts/NexaLight.otf') format('otf');
        font-style: normal;
        font-weight: normal;
    }
@font-face {
        font-family:'OpenSans';
        src: url('/fonts/OpenSans-Regular.ttf') format('ttf');
        font-style: normal;
        font-weight: normal;
    }

Than to style some elements: 

body{
    font-family: NexaLight,Arial,Helvetica,sans-serif;
}
h1, h2{
    font-family: NexaBold,Arial,Helvetica,sans-serif;
}

Upvotes: 1

Related Questions