W3.CSS Fonts
W3.CSS Fonts
W3.CSS uses fonts that are easy to read on screens.
You can use the default fonts, built-in font classes, or your own fonts.
Default Fonts
Verdana is the default font used in W3.CSS. It has a good letter spacing and is easy to read.
Segoe UI is the default font for headings. It has a more narrow letter spacing, which allows for a few more letters in the headings.
This is a Heading
This is normal paragraph text.
Font Classes
W3.CSS provides four font classes:
| Class | Font Style |
|---|---|
w3-serif |
Serif |
w3-sans-serif |
Sans serif |
w3-monospace |
Monospace |
w3-cursive |
Cursive |
Serif
The w3-serif class uses a serif font:
The quick brown fox jumps over the lazy dog.
Sans Serif
The w3-sans-serif class uses a sans serif font.
The quick brown fox jumps over the lazy dog.
Monospace
In a monospace font, every character has the same width.
Monospace fonts are often used for computer code.
const message = "Hello World";
Cursive
The w3-cursive class uses a cursive font.
The quick brown fox jumps over the lazy dog.
Combine Font Classes with Text Sizes
Font classes can be combined with other W3.CSS classes.
Monospace Header
Serif Large
Sans serif text
Cursive red text
Example
<h1 class="w3-monospace">Monospace Header</h1>
<p class="w3-serif w3-xxlarge">Serif Large</p>
<p class="w3-sans-serif w3-large">Sans serif text</p>
<p class="w3-cursive w3-xlarge w3-text-red">Cursive red text</p>
Try it Yourself »
Use Your Own Font
You are not limited to the built-in W3.CSS fonts.
Use CSS font-family to choose your own font.
In the example above:
- Arial is the preferred font
- Helvetica and sans-serif are fallback fonts
Always provide fallback fonts in case the preferred font is not available.
Change the Font for the Whole Page
You can change the fonts for both normal text and headings.
Example
body, h1, h2, h3, h4, h5, h6 {
font-family: Arial, Helvetica, sans-serif;
}
Try it Yourself »
What You Have Learned
- Verdana is the default font for normal W3.CSS text
- Segoe UI is the default font for W3.CSS headings
w3-serifdisplays serif textw3-sans-serifdisplays sans serif textw3-monospacedisplays fixed-width textw3-cursivedisplays cursive text- Font classes can be combined with other W3.CSS classes
- You can use CSS to choose your own fonts
More Examples
Explore more fonts and font combinations.
Web Safe Sans Serif Fonts
| Font Family | Safe Fallback |
|---|---|
| Arial | Helvetica, sans-serif |
| Helvetica | Arial, sans-serif |
| Geneva | Verdana, sans-serif |
| Segoe UI | Arial, sans-serif |
| Tahoma | "Trebuchet MS", sans-serif |
| Trebuchet MS | Tahoma, sans-serif |
| Verdana | Geneva, sans-serif |
Web Safe Serif Fonts
| Font Family | Safe Fallback |
|---|---|
| Times New Roman | Times, serif |
| Georgia | serif |
Monospace Fonts
In a monospace font, all letters occupy the same width.
Monospaced fonts are often used to display computer code.
| Font Family | Safe Fallback |
|---|---|
| Monospace | monospace |
| Courier New | monospace |
| Lucida Console | Monaco, monospace |
| Monaco | Lucida Console, monospace |
Handwriting Fonts
There are no web safe handwriting fonts, but you can safely use w3-cursive.
Google Fonts
You can also use external fonts with W3.CSS.
Google Fonts provides many fonts that can be added to your web pages.
Example
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<style>
body {
font-family: Roboto, sans-serif;
}
</style>
Try it Yourself »
