Search code examples
htmlcssfontsfont-facewebfonts

My fonts work different on button and input tag

This question is pure for designers. On my html page I call fonts in header like this:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=BioRhyme&display=swap">
<link rel="stylesheet" type="text/css" href="css/fonts.css">

My fonts.css file look like this:

* {
    font-family: 'BioRhyme', serif;
}

But my fonts look different on <button> and on <input> is there a way to bypass that and make it look like rest of the page and how?

Solution

  • If elements aren't using the font-family you've set it means they're being overridden by something, this could be another CSS file or a browser default.

    Your browser's dev tools can show you what styles are being applied to an element and which CSS file they come from.

    You could also use the !important modifier to override other style sheets.

    * {
    font-family: 'BioRhyme', serif !important;
}