CODEWITHSUNDEEP
htmlcssfontsfont-face
Alireza Farahani
Alireza Farahani

Reputation: 2549

Custom font face not requested by browsers

I know that questions with similar titles already exist, but after reading them, I'm still stuck.

I'm developing a website using Django and serving static files (css and js) with no problem using {% static %} tag. I wanted to use a custom font so put this style tag in my base template. (and it ends up in <head> of the page the way I expect.)

<style>
    @font-face {
        font-family: IRANSansX !important;
        font-style: normal;
        font-weight: 400;
        src: url({% static 'css/fonts/IRANSansX-Regular.woff2' %}) format('woff2'); /* final value -> url(/static/css/fonts/IRANSansX-Regular.woff2)*/
    }

    body {
        font-family: IRANSansX, sans-serif;
    }
</style>

To my surprise, nothing happened. In both Chrome and Firefox, the browser don't event send the request to download the font. I did several checks:

It's strange that bootstrap-icons.woff2 font, which is also of type woff2, is working properly and is loaded by browsers. The only difference is that, it's relatively addressed by bootstrap-icons.css file.

Upvotes: 0

Views: 196

Answers (1)

Alireza Farahani
Alireza Farahani

Reputation: 2549

It was all to !important at the end of font-family definition. I removed it and everything worked!

It's strange that if !important is not a part of the font-face and actually breaks its functionality, how come my IDE (Pycharm) didn't even trigger a warning.

Upvotes: 1

Related Questions