CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user3398659
user3398659

Reputation: 31

How do I change the font-weight of entire html doc in bootstrap?

I've tried multiple ways to do this, with no success. I'm trying to set the entire webpage in 100 font weight. How would I do this?

Upvotes: 0

Views: 1037

Answers (6)

kockburn
kockburn

Reputation: 17616

You'd probably want to do something like this since all your text is located in your body. However, I see you linked bootstrap. If you are using bootstrap classes, you'll have to check and make sure they don't play around with the font-weight. If they do you need to manually override them.

CSS

body, <more elements here>{
font-weight:100;
}

Upvotes: 0

elmauro
elmauro

Reputation: 39

try 

font-weight:100 !important;

the !important in Bootstrap is necessary as you about writing styles commonly established

Upvotes: 0

EternalHour
EternalHour

Reputation: 8621

I believe it also depends how you are defining the styles. If you are using style tags it's probably not possible. But, if you are linking a CSS file, it may be by the order you are including them in the head. Make sure your overriding CSS, is below the bootstrap CSS.

<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/site-specific.css" />

This is based on How to overwrite styling in Twitter Bootstrap

Then something like * { font-weight: 100 } should work providing that the font you are using supports that particular weight, so make sure to verify that.

Upvotes: 0

Glynne Turner
Glynne Turner

Reputation: 149

i find the best way is to set the CSS as follows

body,html{font-weight:100;}

Upvotes: 0

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201628

When not using Twitter Bootstrap or similar frameworks that have their own CSS settings, it would be sufficient to set

* { font-weight: 100 }

naturally assuming that all the fonts used have a typeface with weight 100. The selector * matches all elements.

However, Twitter Bootstrap may contrain CSS rules that override the rule above, due to higher specificity (the universal selector * has very low specificity). You would need to analyze what these might be and how they relate to your HTML markup and CSS code. Alternatively, you can use the !important specifier that makes your rule win any other rules unless they use that specifier, too:

* { font-weight: 100 !important; }

Generally, !important should be used as the last resort only. But if you don’t use it here, there will be the risk that some future version of Bootstrap contains rules that override yours.

P.S. Setting all text in 100 weight generally makes the page unreadable. Such typefaces are normally meant to be use in large font size only, e.g. for large-size headings.

Upvotes: 1

Dane O&#39;Connor
Dane O&#39;Connor

Reputation: 77318

To my understanding there's no way to do this in a single stoke. You have to explicitly override all the default bootstrap styles with your font-weight: 100;.

Upvotes: 0

Related Questions