0

I have a button, and a corresponding CSS declaration to change its font-family, but the button's font doesn't change.

This is the reasearch I've conducted:

I had found this post, but it was not answered, and I had already used !important, and checked devtools, but devtools said that it was applying the font. This post doesn't apply to me: I'm not using any form of reset.css. This one also doesn't apply to me, as he/she made a mistake with the declaration, and that was about inputs, not buttons.

This is the code that styles the button:

@import url('https://fonts.googleapis.com/css?family=Dosis');

/* ... */

button.main {
  width: 40%;
  margin-left: 10%;
  margin-top: 20px;
  height: 80px;
  border-radius: 8px;
  font-size: 50px;
  border-style: solid;
  background-color: #50c878;
  border-color: #60b989;
}

button {
  font-family: "Dosis" !important;
}

I expected the button to have the Dosis font, but it instead has the default font. I can't seem to find any errors in it.

Thank you in advance!

Person
  • 379
  • 1
  • 3
  • 15
  • Is the font working at all? Do other elements show the font? It seems to work in [this fiddle](https://jsfiddle.net/MrLister/Ly9znoxg/). – Mr Lister Apr 06 '19 at 18:06
  • Yes, and I realised that I made a dumb, idiotic mistake. Turns out, the font I selected looks a decent bit like the normal, especially when it isn't bold, so this whole time it *was* working, just I couldn't tell the difference. – Person Apr 06 '19 at 18:08
  • Ah, glad it's solved then! – Mr Lister Apr 06 '19 at 18:09

1 Answers1

0

Turns out, the font I selected looks a decent bit like the normal, especially when it isn't bold, so this whole time it was working, just I couldn't tell the difference.

Sorry!

Person
  • 379
  • 1
  • 3
  • 15