<p class="lighter">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat, reprehenderit?</p>
<p class="normal">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat, reprehenderit?</p>
<p class="bold">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat, reprehenderit?</p>
<p class="bolder">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat, reprehenderit?</p>
<hr>
<p class="fw100">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat, reprehenderit?</p>
<p class="fw200">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat, reprehenderit?</p>
<p class="fw300">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat, reprehenderit?</p>
<p class="fw400">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat, reprehenderit?</p>
<p class="fw500">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat, reprehenderit?</p>
<p class="fw600">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat, reprehenderit?</p>
<p class="fw700">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat, reprehenderit?</p>
<p class="fw800">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat, reprehenderit?</p>
<p class="fw900">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat, reprehenderit?</p>
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
p {
font-family: "Roboto", sans-serif;
}
.lighter {
font-weight: lighter;
}
.normal {
font-weight: normal;
}
.bold {
font-weight: bold;
}
.bolder {
font-weight: bolder;
}
.fw100 {
font-weight: 100;
}
.fw200 {
font-weight: 200;
}
.fw300 {
font-weight: 300;
}
.fw400 {
font-weight: 400;
}
.fw500 {
font-weight: 500;
}
.fw600 {
font-weight: 600;
}
.fw700 {
font-weight: 700;
}
.fw800 {
font-weight: 800;
}
.fw900 {
font-weight: 900;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.