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

css, fonts, html

Solution

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:

https://purecss.io/buttons/

or there:

https://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 */
}

Problem

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?

Original source