Custom font face not requested by browsers-CodePudding

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:

I tested and saw that Django serves the font if I manually create a url by appending the value of url() to my website domain.
I tried to apply the font to other elements, no success.
I tried '' and "" for my font-family name and the url, no success.
I tried another font, no success.

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.

CodePudding user response：

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.

CodePudding user response：

It works for me as follows:

@font-face {
    font-family: "iransans";
    src: url("./IRANSansWebFaNum.eot");
    src: url("./IRANSansWebFaNum.eot?#iefix") format("embedded-opentype"), url("./IRANSansWebFaNum.woff2") format("woff2"), url("./IRANSansWebFaNum.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

body {
  font-family: "IRANSansX", sans-serif;
}