I am building a very simple web page in which I am using the Roboto Mono font family from Google Fonts repository.
I have overridden the user agent fonts for the form and it works for the input of type text. But it does not seem to be working for the input of type submit.
The HTML code is this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,100,100italic,300,300italic,400italic,500,700,500italic,700italic' rel='stylesheet' type='text/css'>
</head>
<body>
<h1>Font Example in Forms</h1>
<form>
<input type="text" placeholder="First Name"/>
<input type="submit" value="Save" />
</form>
</body>
</html>
and the CSS code is this:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
font-size: 62.5%;
font-family: "Roboto Mono", monospace;
}
body {
font-size: 1.6em;
margin-top: 20px;
}
/* This is to override the user agent styles */
input,
textarea,
select,
keygen,
button {
font-family: "Roboto Mono", monospace;
}
input[type="text"] {
display: block;
width: 100%;
height: 3.2rem;
font-size: 1.8rem;
}
You can see that live here:
http://jsbin.com/foqiso/edit?html,css,output
Any clue why the font of the button is not 'Roboto Mono' ?
Update I forgot to tell you that I am loading this page on Chrome. It seems that when I am loading the page on Firefox, everything works as expected. Same problem appears on Safari too. My OS is MAC OS X Yosemite.
Update about duplicate question: My question has been flagged as duplicate of this. It is true that they both try to apply a style on an input of type submit and style is not applied on Chrome. But, the answer on that question, although it gives a workaround (add a background color) it does not explain why this problem occurs on Chrome and Safari? Is it a bug on those browsers?
