CSS: font remained as Arial after changing the font-family to -apple-system fonts

Question

I want to use the font-family used by Airbnb for their website on my website. It is "Circular, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif." However, after I set the font-family of my website's elements to this, the font remained as the default Arial. I also tried other -apple-system font-families without "Circular" at the start, and it still did not work. I searched tutorials online and did not see any mentioning of downloading any dependency into the project. I am wondering what I missed. Thanks!

Simplicius Simplicius · Accepted Answer · 2020-08-26T16:43:15

Some elements like buttons have a different browser specific font-family on default. You need to specifically inherit the font-family for those.

See below:

@import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap');

html {
  font-family: 'Bangers', cursive;
  font-size: 1rem;
  line-height: 1.5;
}

button.example {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

<p>
On <u>paragraphs</u> for example the <i>font-family</i>&nbsp&nbspis inherited on default unlike on <u>buttons</u>
</p>
<button>
  Not inherited
</button>
<button class="example">
   inherited
</button>

CSS: font remained as Arial after changing the font-family to -apple-system fonts

1 Answers