How do I change the font-family of a <button> element?

Question

This is my only CSS

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

body {
    font-family: 'thefont';
}

When I do a <button>Hi</button> the font ends up being -apple-system.

If I actually assign the font to button, it will make the font appear.

Does anyone know why it's not affecting the body and everything inside it?

Answer 1

In addition to the info below, to ensure your custom font is being taken into account for the button, you need to apply

button {
    font-family : inherit;
    font-size: 1em;
}

to all button elements.

You can inspect how they do it there:

http://purecss.io/buttons/

or there:

http://getbootstrap.com/css/#buttons

Also make sure that your font is exported in several different formats so that it is supported by all platforms.

You can use FontSquirrel Generator to export your font to all formats.

Your CSS should look a bit like that:

@font-face {
  font-family: 'thefont';
  src: url('the-font.eot'); /* IE9 Compat Modes */
  src: url('the-font.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('the-font.woff2') format('woff2'), /* Super Modern Browsers */
       url('the-font.woff') format('woff'), /* Pretty Modern Browsers */
       url('the-font.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('the-font.svg#svgFontName') format('svg'); /* Legacy iOS */
}