A font is a set of printable or displayable text characters in a specific style.
CSS supports multiple font properties.
These include font family, font size, font weight, font variants, and more
A paragraph with font styles applied.
This text is bold with an 18px font size.
<style>
.text-bold-lg {
font-size: 18px;
font-weight: bold;
}
</style>
<p class="text-bold-lg">
This text is bold with an 18px font size.
</p>The font-family property sets the font face, or typeface, in an element.
Its value is one or more font-names, separated by commas.
If the browser does not support the first font, it moves to the next as fallback, etc.
Text rendered with the Arial font.
This text displays in an Arial font.
<style>
.arial {
font-family: Arial, Helvetica, sans-serif;
}
</style>
<p class="arial">
This text displays in an Arial font.
</p>
If the Arial font is not supported by the browser, it will use Helvetica.
If neither font is available, it will use a generic sans-serif font.
For details on font-family, see our CSS font-family reference guide.
Browser fonts are not always sufficient, but luckily custom fonts may be used.
Use the @font-face rule to add a custom font.
This paragraph uses a custom font declared in the font face rule.
This text is rendered with a custom JosefinSans font
<style>
@font-face {
font-family: JosefinSans;
src: url(/media/JosefinSans-Regular.ttf);
}
</style>
<p style="font-family: JosefinSans">
This text is rendered with a custom JosefinSans font
</p>The font-style property is used to render text in normal or italic style
Valid values are normal, italic, or oblique.
With oblique the browser slightly slants the font. Therefore, italic is preferred over oblique.
Three font styles: normal, italic, and oblique.
This text style is normal
This text style is italic
This text style is oblique
<p style="font-style: normal">This text style is normal</p>
<p style="font-style: italic">This text style is italic</p>
<p style="font-style: oblique">This text style is oblique</p>For details on font-style, see out CSS font-style Property Reference
The font-size property sets the size of the text.
This property accepts absolute or relative size values.
An absolute font-size gives you exact control over the text-size.
The size will not change, even with different devices, browsers, or environments.
Absolute values include px, cm, in, and others.
Absolute font size expressed in px (pixels).
This text is rendered with an absolute font size.
<p style="font-size: 22px">
This text is rendered with an absolute font size.
</p>An example of a relative font-size is a value expressed in em.
em is equal to the current font size, which, by default, is 16px.
And 1.5em is 50% larger than the current font.
Relative font size expressed in em.
This text is rendered with a relative font size.
<p style="font-size: 1.25em">
This text is rendered with a relative font size.
</p>A responsive font size adjust according to the browers size.
Setting the font-size value to vw unit, which is viewport width.
With this setting the size follows the size of the browser window.
Responsive font size expressed in vw.
Resizing the browser will adjust the font size.
This text is rendered with a responsive font size.
<p style="font-size: 1.7vw">
This text is rendered with a responsive font size.
</p>The font-weight property sets the weight (boldness) of a font.
This property can have the following values:
normal - standard weightboldbolderlighterinherit - inherits parent font weightinitialunsetAn example of bold text.
This text is bold.
<p style="font-weight: bold">
This text is bold.
</p>For details on font-weight, see our CSS font-weight Property Reference
The font-variant can display text in small-caps.
Small-caps are uppercase letters but smaller than the original font.
Text in small-caps font.
This text is rendered in small caps.
<p style="font-variant: small-caps">
This text is rendered in small caps.
</p>For details on font-variant, see our CSS font-variant Property Reference
This table lists all font properties.
| Property | Description |
|---|---|
| font | A shorthand to set all font properties in one declaration |
| font-family | Specifies the font family for text |
| font-size | Specifies the font size of text |
| font-style | Specifies the font style for text |
| font-variant | Specifies whether text should be displayed in a small-caps font |
| font-weight | Specifies the weight of a font |
