Open Sans Font Lab
Each sample below uses Open Sans with specific weight settings so you can inspect which actual font file the browser renders in different scenarios (development vs production).
CSS Module classes (Open Sans 300)
Using CSS Modules to request Open Sans 300, with and without font-synthesis disabled.
h2 — class: openSansLight
Open Sans 300 via CSS module class
h2 — class: openSansLightNoSynth
Open Sans 300 via CSS module class (font-synthesis: none)
h2 > a — class: openSansLightNoSynth + linkReset (link inside heading)
Open Sans 300 link inside heading (font-synthesis: none)
Inline styles (Open Sans 300)
Using inline styles to request Open Sans 300 on different elements.
h2 — inline fontFamily + fontWeight: 300
Open Sans 300 via inline style on h2
p — inline fontFamily + fontWeight: 300 + fontSynthesis: 'none'
Open Sans 300 via inline style on paragraph (font-synthesis: none)
Other weights for comparison
These samples request 400, 600, and 700 so you can confirm which font files are loaded when heavier weights are used.
h2 — class: openSansNormal (400)
Open Sans 400 via CSS module class
h2 — class: openSansSemiBold (600)
Open Sans 600 via CSS module class
h2 — class: openSansBold (700)
Open Sans 700 via CSS module class
Bootstrap utility classes
Using Bootstrap's font-weight utilities, which are configured to map to Open Sans weights in your SCSS variables.
p — class: font-weight-light
Open Sans via Bootstrap font-weight-light
p — class: font-weight-normal
Open Sans via Bootstrap font-weight-normal
p — class: font-weight-bold
Open Sans via Bootstrap font-weight-bold