Fonts
CSS provides full control over text fonts on your page.
Demo: Different Fonts
HTML
<p class="serif">Serif font (Georgia)</p>
<p class="sans">Sans-serif font (Arial)</p>
<p class="mono">Monospace font (Courier)</p>
<p class="cursive">Cursive font</p> CSS
.serif { font-family: Georgia, "Times New Roman", serif; font-size: 1.25rem; }
.sans { font-family: Arial, Helvetica, sans-serif; font-size: 1.25rem; }
.mono { font-family: "Courier New", Courier, monospace; font-size: 1.25rem; }
.cursive { font-family: "Brush Script MT", cursive; font-size: 1.5rem; }Live Output Window
The font-family Property
font-family: "Helvetica Neue", Arial, sans-serif;
The browser uses the first available font in the list (the “font stack”).
Web Fonts with @font-face
@font-face {
font-family: "MyFont";
src: url("myfont.woff2") format("woff2");
}
Using Google Fonts
Demo: Google Font
HTML
<p class="inter">This uses the Inter font from Google Fonts</p> CSS
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
.inter {
font-family: Inter, sans-serif;
font-size: 1.25rem;
font-weight: 700;
}Live Output Window
Font Properties
| Property | What It Does |
|---|---|
font-family | Typeface (font stack) |
font-size | Size of text |
font-weight | Boldness (normal, bold, 400, 700, etc.) |
font-style | Italic or normal |
font-variant | Small-caps variant |
font | Shorthand for all font properties |