CSS font weight
CSS Tutorial » CSS font weight
Study in this chapter:
1. - Explanations - How can you write font weight in CSS?
2. - font-weight: bold
3. - font weight not working
4. - font-weight: Black (Heavy)
5. - font weight property
font-weight property specifies how thick or thin the text characters should be displayed on a web page.
Internal Style - by using a <style> element in the <head> section
External Style - by using an external CSS file as style.css
Inline - by using the style attribute in HTML elements
Syntax:
font-weight: normal;
font-weight: bold;
/* Keyword values relative to the parent as */
font-weight: lighter;
font-weight: bolder;
/* Numeric values as */
font-weight: 100; /* Thin(Hairline) */
font-weight: 200; /* Extra Light (Ultra Light) */
font-weight: 300; /* Light */
font-weight: 400; /* normal */
font-weight: 500;
font-weight: 600; /* Semi Bold */
font-weight: 700; /* bold */
font-weight: 800; /* Extra Bold(Ultra Bold) */
font-weight: 900; /* Black (Heavy) */
/* Global values */
font-weight: inherit;
font-weight: initial;
font-weight: revert;
font-weight: revert-layer;
font-weight: unset;
Inline CSS.
Example:
font-weight: normal;
font-weight: bold;
font-weight: 100;
font-weight: 500;
font-weight: 900;
font-weight: revert;
Browser Support
| Element |  Chrome |
 IE |
 Firefox |
 Opera |
 Safari |
| font weight | Yes | Yes | Yes | Yes | Yes |
Font weight bold
The font-weight: bold; property is used to make the characters of a text thicker to highlight the description of the text that follows it.
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-weight: normal;
}p.light {
font-weight: lighter;
}p.thick {
font-weight: bold;
}p.thicker {
font-weight: 900;
}
</style>
</head>
<body><h1>The font-weight Property of a text</h1>
<p class="normal">This is a paragraph. <code>font-weight: normal;</code></p>
<p class="light">This is a paragraph. <code>font-weight: lighter;</code></p>
<p class="thick">This is a paragraph. <code>font-weight: bold;</code></p>
<p class="thicker">This is a paragraph. <code> font-weight: 900;</code></p></body>
</html>
Related subjects:
CSS Font Family
Font size
HTML Font Color
CSS Font Color
Creating a weight multiplier custom property
Media queries on web pages are only used to change the value of custom properties.
Instead of having to enter font weights for all items in and out of dark mode, the only thing we’re putting in our media query is a --font-weight-multiplier custom property:
<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
src: url('https://hellogreg.github.io/fonts/SourceSans3VF-Roman.ttf.woff2') format('woff2-variations');
font-family: 'SourceSans';
font-weight: 100 900;
}/* DARK MODE CSS CUSTOM PROPERTIES */
.darkmode {
--background: #222;
--color: #fff;
--font-weight-multiplier: .85;
}/* ALL OTHER CSS... */
body {
background: var(--background, #fafafa);
color: var(--color, #111);
font-weight: calc(400 * var(--font-weight-multiplier, 1));
}strong, b, th, h1, h2, h3, h4, h5, h6 {
font-weight: calc(700 * var(--font-weight-multiplier, 1));
}article {
font-family: 'SourceSans', system-ui, sans-serif;
font-size: 1.5rem;
margin: 0 auto;
max-width: 60rem;
width: 94vw;
}/* Dark mode toggle button styles */
.switchzone{position:relative;display:inline-block;width:2.5rem;height:1.25rem;top:.5rem;}.switchzone input{opacity:0;width:0;height:0}.switchzone .toggler{border-radius:1.25rem;position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc}.switchzone .toggler:before{border-radius:50%;position:absolute;content:"";height:1.25rem;width:1.25rem;background-color:#222}.switchzone input:checked+.toggler{background-color:#555}.switchzone input:focus+.toggler{-webkit-box-shadow:0 0 1px #555;box-shadow:0 0 1px #555}.switchzone input:checked+.toggler:before{-webkit-transform:translateX(1.25rem);transform:translateX(1.25rem);background-color:#fafafa}
</style>
</head>
<body class="darkmode">
<article>
<label for="checkdark">Toggle dark mode: <span class="switchzone">
<input id="checkdark" type="checkbox" checked>
<span class="toggler"></span> </span></label>
<h1>This is my title</h1>
<p>This is my text. This is my text.This is my text.</p>
<p>This is my text. This is my text.This is my text.</p>
</article>
<script>
document.getElementById("checkdark").addEventListener("change", e => {
if (e.target.checked) {
document.body.classList.add("darkmode");
} else {
if (document.body.classList.contains("darkmode")) {
document.body.classList.remove("darkmode");
}
}
});
</script>
</body>
</html>
Tags: font weight bold, thin, values, semibold, black, react, not working, property, bold vs 700, default, alternative
font weight Black (Heavy) - font-weight: 900;
The CSS font-weight property applied to a web page can give you more control over text how light or bold should be.
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-weight: normal;
}p.light {
font-weight: lighter;
}p.thick {
font-weight: bold;
}p.thicker {
font-weight: 900; /* font weight Black (Heavy) - font-weight: 900;*/
}
</style>
</head>
<body><h1>font weight Black (Heavy) - font-weight: 900;</h1>
<p class="normal">This is a paragraph. <code>font-weight: normal;</code></p>
<p class="light">This is a paragraph. <code>font-weight: lighter;</code></p>
<p class="thick">This is a paragraph. <code>font-weight: bold;</code></p>
<p class="thicker">font weight Black (Heavy) - font-weight: 900; <code> font-weight: 900;</code></p></body>
</html>
Summary of description
font weight bold, font-weight:bold; thin, values, semibold, black, react, not working, property, bold vs 700, default, alternative
CSS font weight bold, thin, values, semibold, black, react, not working - css tutorial
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.