This is a paragraph with
font-normal
. It's the standard weight ideal for body content ensuring readability.
This paragraph uses
font-light
. It should appear thinner, often used for secondary information or captions. (Its appearance depends on font support - see Gotcha below).
You can make text
stand out
using
font-bold
for emphasis within a sentence.
Tailwind's font weight utilities (like
font-light
,
font-extrabold
, etc.)
instruct the browser to use a specific font weight. However, this only works if the
font family currently active on the element
actually includes that specific weight.
What happens if the weight isn't supported?
If you apply a class like
font-light
and the active font doesn't have a "light" variant:
font-normal
.
Test it:
The text below uses
font-light
. With default Tailwind fonts, it should look light.
If you were to load a custom font that only has a "regular" and "bold" weight (see commented-out code in
<head>
),
this text might not appear light.
This line is styled with
font-light
. Does it look lighter than normal text on your system with the current font? If not, that's the gotcha in action for this specific font/weight combination!