Bootstrap with font-weight: 500 looks "normal" on Firefox

user_1784306 0
Viewed 293

I'm using Bootstrap and setting an element to use font-weight: 500 causes it to look medium/semi-bold in Chrome but normal-weight in Firefox on Windows:

Chrome:

Element with medium-weight text in Chrome

Firefox:

Same element in Firefox, with a normal weight

How can I make it look semi-bold in both browsers?

twitter-bootstrap typography fonts css
1 Answers

Bootstrap's sans-serif font on Windows is "Segoe UI," which has support for the weights "normal" (400) and "semi-bold" (600) but not "medium" (500). In situations like this, Chrome rounds up to "semi-bold" while Firefox rounds down to "normal." Changing to 600 will achieve semi-bold in both browsers.

user_17843060
Related