CODEWITHSUNDEEP
cssfonts
Vaja Mania
Vaja Mania

Reputation: 31

Custom font not loading in CSS font-face

So I have a production project in laravel. The problem I'm facing is when I upload custom font to public directory (ttf, woff, woff2) and then in .css file specify @font family it does show up in CSS when I inspect element as font-family but font does not actually change.

@font-face {
    src: url('/../fonts/custom-font.woff');
    font-family: "custom-font" !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "custom-font" !important;

Upvotes: 0

Views: 1422

Answers (1)

Vaja Mania
Vaja Mania

Reputation: 31

In my case I had several problems. First of all I had !important which was not needed, but most importantly, the font i was using was wrongly formatted.

     @font-face {
        src: url('/../fonts/custom-font.woff');
        font-family: "custom-font";
    }
    
    h1, h2, h3, h4, h5, h6 {
        font-family: "custom-font";
}

It should have been like this, and make sure you double check font you are using

Upvotes: 2

Related Questions