CSS Font Weight

The font-weight property controls how thick or thin text characters appear.

Keyword Values

.normal   { font-weight: normal; }   /* Same as 400 */
.bold     { font-weight: bold; }     /* Same as 700 */
.lighter  { font-weight: lighter; }  /* One step lighter than parent */
.bolder   { font-weight: bolder; }   /* One step bolder than parent */

Numeric Values

Font weight can be specified as a number from 100 to 900 in steps of 100:

.thin       { font-weight: 100; }   /* Thin */
.light      { font-weight: 300; }   /* Light */
.regular    { font-weight: 400; }   /* Normal / Regular */
.medium     { font-weight: 500; }   /* Medium */
.semibold   { font-weight: 600; }   /* Semi Bold */
.bold       { font-weight: 700; }   /* Bold */
.extrabold  { font-weight: 800; }   /* Extra Bold */
.black      { font-weight: 900; }   /* Black */

Important Notes

• The font must support the weight you specify
• If a weight isn't available, the browser picks the closest match
• When using Google Fonts, include the weights you need

<!-- Load specific weights from Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">

Practical Usage

h1 { font-weight: 700; }
h2 { font-weight: 600; }
p  { font-weight: 400; }
.caption { font-weight: 300; }