Menu
Styling Text & Links
CSS Fonts
Font families, weights, and sizes.
1Font Styling
Set the font family and weight.
Example Code
css
body {
font-family: 'Arial', sans-serif;
font-size: 16px;
font-weight: bold;
}2Understand it in a real interface
A font stack lets the browser choose a usable fallback if the preferred font is unavailable. Different fonts have different metrics, so a fallback can change wrapping and component heights. Weight values also depend on the files or variable font axes actually available to the browser.
3Try it yourself
Create a heading and a paragraph with a system-font fallback stack. Temporarily remove the preferred font and compare line breaks. Try a longer button label to see whether the fallback changes its width. Avoid fixing a control’s dimensions around only one font rendering.
Finished reading?
Mark this topic as complete to track progress.