0

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;
12
  • In the font declaration you call the font custom-font.woff but in the h1 rules you call custom-font... So I would expect this to not work. they need to be the same if you want this to work.
    – Dominik
    May 27, 2021 at 22:10
  • Now that you made a change to that, try without the dot.
    – Dominik
    May 27, 2021 at 22:11
  • Yep, my bad, thats's wrong but just here not in the project itself the naming is allright there xD
    – Vaja Mania
    May 27, 2021 at 22:11
  • Also, when i inspect the page, that custom-font does not appear in network> fonts section it should right? or inspect > sources
    – Vaja Mania
    May 27, 2021 at 22:13
  • No the browser will only fetch fonts if they have been used on the page no matter if you already declared them. Remove the dot from the font family name and try again. Dots are special in CSS land
    – Dominik
    May 27, 2021 at 22:15

1 Answer 1

2

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.