I've encountered an issue with changing the font of a button using CSS. Despite including the necessary declaration, the font does not seem to update as expected.
After conducting some research on this problem:
I came across this post, but unfortunately it was unanswered. I have already tried using !important and checked devtools, which indicated that the font was being applied. Another post, here, did not provide a solution relevant to my situation, as I am not using any form of reset.css. Similarly, this post also did not offer a solution, as it pertained to inputs rather than buttons.
This is the CSS code used to style 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;
}
Despite expecting the button to display in the Dosis font, it continues to appear in the default font. I have reviewed the code multiple times but haven't been able to identify any errors.
Thank you for any assistance provided!