How do I change the font-family of a <button> element?
<p>This is my only CSS</p>

<pre><code>@font-face {
  font-family: 'thefont';
  src: url('fonts/the-font.otf');
  font-style: normal;
}

body {
    font-family: 'thefont';
}
</code></pre>

<p>When I do a <code>&lt;button&gt;Hi&lt;/button&gt;</code> the font ends up being <code>-apple-system</code>.</p>

<p>If I actually assign the font to <code>button</code>, it will make the font appear.</p>

<p>Does anyone know why it's not affecting the body and everything inside it?</p>