CSS Font Weight
The font-weight property sets how bold or light text is, using keywords or numeric values.
The <font-weight> property controls the thickness of the characters. You can use simple keywords or a numeric scale for finer control, though the weights available depend on what the font actually provides.
Keywords and numbers
Numeric weights
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-weight: 700;
}
.subtle {
font-weight: 300;
}
</style>
</head>
<body>
<h1>Dashboard</h1>
<p class="subtle">Last updated a few seconds ago.</p>
</body>
</html>Keyword weight
<!DOCTYPE html>
<html>
<head>
<style>
strong {
font-weight: bold;
}
</style>
</head>
<body>
<p>Please <strong>confirm</strong> your email address.</p>
</body>
</html>Note: A font only shows a given weight if that weight was loaded. Requesting 300 on a font that only ships 400 and 700 will fall back to the nearest available weight.
