CODEWITHSUNDEEP
htmlcssgoogle-chromefontsstyles
ReshaD
ReshaD

Reputation: 946

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.

Upvotes: 2

Views: 5298

Answers (3)

ReshaD
ReshaD

Reputation: 946

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;
      }

Upvotes: 0

pavelccz
pavelccz

Reputation: 86

You can use right click and "inspect" in chrome to see which styles are in use and are overriding the others.

If you inspect the element, you will see what is overriding what and also what is misspelled with a little yellow warning icon next to it.

Upvotes: 0

Prashant Gupta
Prashant Gupta

Reputation: 796

Have u included this file ??

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

If not just past in header.

Or If you want to in css, Use this

@import url(https://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic);

Upvotes: 2

Related Questions