title: Font is not dispayed as expected
body: <p>Trying to use <code>ubuntu</code> font at my website, so I did the below:</p>
  <ol>
  <li>Downloaded the font from <a href="https://fonts.google.com/specimen/Ubuntu?preview.text_type=custom" rel="nofollow noreferrer">Google fonts</a></li>
  <li>Created a file <code>static/fonts/ubuntu.woff/ubuntu.css</code> that is including the below:</li>
  </ol>
  <pre class="lang-css prettyprint-override"><code>/* cyrillic-ext */
  @font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 400;
    src: local('Ubuntu'), url(http://localhost:8090/static/fonts/ubuntu.woff/4iCs6KVjbNBYlgoKcg72j00.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
  }
  /* cyrillic */
  @font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 400;
    src: local('Ubuntu'), url(http://localhost:8090/static/fonts/ubuntu.woff/4iCs6KVjbNBYlgoKew72j00.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }
  /* greek-ext */
  @font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 400;
    src: local('Ubuntu'), url(http://localhost:8090/static/fonts/ubuntu.woff/4iCs6KVjbNBYlgoKcw72j00.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
  }
  /* greek */
  @font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 400;
    src: local('Ubuntu'), url(http://localhost:8090/static/fonts/ubuntu.woff/4iCs6KVjbNBYlgoKfA72j00.woff2) format('woff2');
    unicode-range: U+0370-03FF;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 400;
    src: local('Ubuntu'), url(http://localhost:8090/static/fonts/ubuntu.woff/4iCs6KVjbNBYlgoKcQ72j00.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 400;
    src: local('Ubuntu'), url(http://localhost:8090/staticfonts/ubuntu.woff/4iCs6KVjbNBYlgoKfw72.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  </code></pre>
  <ol start="3">
  <li>Called it from my <code>html</code> file as:</li>
  </ol>
  <pre class="lang-html prettyprint-override"><code>&lt;link href=&quot;http://localhost:8090/static/fonts/ubuntu.woff/ubuntu.css&quot; rel=&quot;stylesheet&quot;&gt;
  &lt;style&gt;
    body {
        font-family: Ubuntu, &quot;times new roman&quot;, times, roman, serif;
        color: white; /* Text color */
        background-color: #772953; /* Used if the image is unavailable */
        height: 500px; /* You must set a specified height */
        background-position: center; /* Center the image */
        background-repeat: no-repeat; /* Do not repeat the image */
        background-size: cover; /* Resize the background image to cover the entire container */
    }
  &lt;/style&gt;
  </code></pre>
  <ol start="4">
  <li>In my <code>html body</code> I have:</li>
  </ol>
  <pre class="lang-html prettyprint-override"><code>&lt;html dir=&quot;ltr&quot; lang=&quot;en&quot;&gt;
  &lt;h1&gt;Bayan Request form &lt;/h1&gt;
  
  &lt;form method=&quot;POST&quot;&gt;
    &lt;fieldset&gt;
      &lt;legend&gt;Bayan Info &lt;/legend&gt;
      &lt;table&gt;
        &lt;tr&gt;
          &lt;td&gt;&lt;label&gt;Bayan number&lt;/label&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input type=&quot;text&quot; name=&quot;email&quot;&gt;&lt;/td&gt;
          &lt;td&gt;&lt;label&gt;Bayan date&lt;/label&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input type=&quot;date&quot; id=&quot;birthday&quot; name=&quot;birthday&quot;&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;&lt;label&gt;&lt;/label&gt;Shipment reference&lt;/label&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input type=&quot;text&quot; name=&quot;subject&quot;&gt;&lt;/td&gt;
          &lt;td&gt;&lt;label&gt;SADAD number&lt;/label&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input type=&quot;text&quot; name=&quot;subject&quot;&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
    &lt;/fieldset&gt;
    ...
  </code></pre>
  <p>But the font display looks to be standard font not the one I want!</p>
  <p><a href="https://i.stack.imgur.com/N9fLH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/N9fLH.png" alt="enter image description here" /></a></p>