title: Custom font on Wordpress not working
body: <p>I'm trying to figure out why my custom font is not loading on WordPress (MAMP, Mac, localhost).</p>
  
  <p>The fonts are stored in <code>wp-content/themes/twentysixteen/fonts/</code></p>
  
  <p>Then in <code>wp-content/themes/twentysixteen/style.css</code> I have the following CSS:</p>
  
  <pre><code>@font-face {
    font-family: "Averta-Regular";
    src: font-url("./fonts/31907B_A_0.eot");
    src: font-url("./fonts/31907B_A_0.eot?#iefix") format('embedded-opentype'), font-url("./fonts/31907B_A_0.woff2") format('woff2'), font-url("./fonts/31907B_A_0.woff") format('woff'), font-url("./fonts/31907B_A_0.ttf") format('truetype');
  }
  
  html {
    font-family: "Averta-Regular", "Helvetica Neue", sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
  }
  
  body {
    margin: 0;
    font-family: "Averta-Regular", "Helvetica Neue", sans-serif;
  }
  </code></pre>
  
  <p>Chrome shows me this:</p>
  
  <p><a href="https://i.stack.imgur.com/AZqQ3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AZqQ3.png" alt="enter image description here"></a></p>
  
  <p>It only works if I have the font installed on my operating system.</p>