reshad reshad - 4 months ago 18
HTML Question

chrome does not respect font-family ('PT Sans')

I have a web-page written in

HTML
, in which I have a
button
. All the page respects the
font-family: 'PT Sans', sans-serif
except my button.

body {
font-family: 'PT Sans', sans-serif;
margin: 0px 0px 0px 0px;
}


Here is the button element inside a table:

<button id="createCampaignButton" class="yellowButton" nowrap>CREATE NEW CAMPAIGN</button>


I also used
<style>
tag like below, it will change the font color but not the font family.

button {
font-family: 'PT Sans', sans-serif;
color: red
}


I searched here but none of them was working for me.

My style-sheet:

<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic' rel='stylesheet' type='text/css'>

.yellowButton {
border: 0 solid #FFCC00;
width:100%;
/*height: 50px;*/
font-size: 16px;
font-weight: bold;
background-color: #FFCC00;
padding: 12px 20px;
box-shadow: 0 2px 2px 0 #C2C2C2;
border-radius: 2px;
outline:none;
}
.yellowButton:active {
border: 0 solid #FFCC00;
width:100%;
/*height: 50px;*/
font-size: 16px;
font-weight: bold;
background-color: #FFCC00;
padding: 12px 20px;
box-shadow: 0 0 0 0 #C2C2C2;
border-radius: 2px;
outline: none;
}


UPDATE
Now I noticed that the problem is only with
'PT Sans'
font ! all other fonts work fine.

Answer

The problem has been solved adding this line to the styles, as far as I understood, button inside table does not inherit styles from body styles. The main problem was that I should have cleaned the cache of the browser.

button{
        font-family:  'PT Sans', sans-serif;
      }