title: Custom font face not requested by browsers
body: <p>I know that questions with similar titles already exist, but after reading them, I'm still stuck.</p>
  <p>I'm developing a website using <code>Django</code> and serving static files (css and js) with no problem using <code>{% static %}</code> tag. I wanted to use a custom font so put this style tag in my base template. (and it ends up in <code>&lt;head&gt;</code> of the page the way I expect.)</p>
  <pre class="lang-html prettyprint-override"><code>&lt;style&gt;
      @font-face {
          font-family: IRANSansX !important;
          font-style: normal;
          font-weight: 400;
          src: url({% static 'css/fonts/IRANSansX-Regular.woff2' %}) format('woff2'); /* final value -&gt; url(/static/css/fonts/IRANSansX-Regular.woff2)*/
      }
  
      body {
          font-family: IRANSansX, sans-serif;
      }
  &lt;/style&gt;
  </code></pre>
  <p>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:</p>
  <ul>
  <li>I tested and saw that Django serves the font if I manually create a url by appending the value of <code>url()</code> to my website domain.</li>
  <li>I tried to apply the font to other elements, no success.</li>
  <li>I tried <code>''</code> and <code>&quot;&quot;</code> for my font-family name and the url, no success.</li>
  <li>I tried another font, no success.</li>
  </ul>
  <p>It's strange that <code>bootstrap-icons.woff2</code> 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 <code>bootstrap-icons.css</code> file.</p>