HTML Fonts dont match on different elements - html

Question

I have an input and h4 element. I'm using the same font and font size but they do not look the same.
#font-face {
font-family: sansReg;
src: url(../fonts/openSansReg.ttf);
}
.global-message h4 {
/*for the chat messages*/
margin: 0;
font-size: 15px;
font-family: sansReg;
}
.input {
/*for the chat message input*/
padding-left: 10px;
box-sizing: border-box;
font-size: 15px;
font-family: sansReg;
border: 0;
border-radius: 2px;
background-color: white;
margin: 0 auto;
outline: 0;
background-repeat: no-repeat;
background-position: 2px 3px;
display: block;
}
<div id="chat-box">
<div id="chat-list-container">
<ul id="chat-messages">
<li class="global-message">
<h4>Will: Anyone wanna play?</h4>
</li>
<li class="global-message">
<h4>George: Hey guys!</h4>
</li>
<li class="global-message">
<h4>Jessica: How do i start a game?</h4>
</li>
</ul>
</div>
<input id="chat-message" class="input" type="text" placeholder="Message" maxlength="32" />
</div>
So as you can see I have some h4's to fill the chat and my input below it and I have used the same font but it looks like this:

Answer 1

The h4 element has font-weight bold by default; therefore, if you want to make the input look the same way, you have to add font-weight: bold; to your input style.
Or, if you want to make h4 look like the input, you can remove the bold by setting it to normal font-weight: normal; on the h4 element.
Examples:
*{
font-family: Helvetica, Arial;
}
.normal {
font-weight: normal;
}
.bold {
font-weight: bold;
}
<h4>default bold</h4>
<h4 class="normal">light</h4>
<input value="default light"><br>
<input value="bold" class="bold"><br>

Answer 2

Headings have different default values. In your case you compare an h4 with a paragraph. As you can see below there is a big difference. What you need is to add font-weight: bold; to your .input-class.
H4 default values
h4 {
display: block;
font-size: 1em;
margin-top: 1.33em;
margin-bottom: 1.33em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
Paragraph default values
p {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
}
A "good" practice (or what I try to remember to do) is to copy all default values in for each CSS-element I create. By doing so I have access to all properties and not only those I want to change.

Answer 3

Add css properties font-weight: bold; font-size: 1em to the input field. The font will look identical to the h4 font.

Answer 4

Try adding this to your css:
.global-message h4{
font-weight: normal;
}
It should make all the font look the same.