title: embedded font looks diffrent from source sample
body: <p>I downloaded this font called <a href="https://fonts2u.com/bender-italic.font" rel="nofollow noreferrer">Bender</a> and embedded it on my website like this:</p>
  
  <pre><code>@font-face { font-family: Bender-Italic; src: url('files/Bender.otf'); } 
  @font-face { font-family: Bender-Italic; font-weight: normal; src:  
  url('files/Bender.otf');}
  body
  {
  font-family: Bender, sans-serif;
  font-weight: normal;
  font-style: normal;
  }
  </code></pre>
  
  <p>but in the browser it doesn't display like in the sample. If I don't choose this font in body sections, different font shows so it definitely does something.</p>
  
  <p>I have tried this <a href="https://stackoverflow.com/questions/1923338/embedded-font-looks-different-than-supposed-to">fix</a> yet it didn't help(ofcourse I used modern syntax, not fontWeight etc).</p>
  
  <p>One possible cause could be that my doctype is</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;
  </code></pre>
  
  <p>instead of</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.1 Transitional//EN"&gt;
  </code></pre>
  
  <p>but when I change it the size of the font and some other formatting doesn't want to work properly etc so I would rather keep it.
  <a href="https://kwandesisamazing.000webhostapp.com/" rel="nofollow noreferrer">Here is the website</a> so you can see what 'broken' font looks like. Also google fonts etc all work fine.</p>