CODEWITHSUNDEEP
htmlcssfonts
RoRo
RoRo

Reputation: 15

Font-Family uses different font on same header

When loading a Google font (Open sans) like this:

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

and using it in the CSS like this:

font-family: 'Open Sans',sans-serif !important;

On different pages but the same header, css etc the page loads:

page 1: font-family: 'Open Sans',sans-serif !important;

page 2: font-family: 'Open Sans',sans-serif !important;

On both pages the Google-font and css get loaded.

Anybody a idea what may cause this?

Upvotes: 0

Views: 1826

Answers (1)

Daniel Dewhurst
Daniel Dewhurst

Reputation: 2603

Try to make your CSS rule more specific. I see you're using the !important tag, so you're probably overwriting existing rules from a framework or elsewhere.

For example, if you're trying to give a font to all headers, you probably have other divs surrounding them. Let's say that div's called content:

body .content .h1, body .content .h2 {
    font-family: 'Open Sans',sans-serif !important;
}

The best thing to do would be the see why your styles aren't being set in inspect element. Right click with Chrome > Inspect over your headers, and see what's styling them. You should try and not use !important rules anywhere unless completely necessary.

Upvotes: 0

Related Questions