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 |
| Verdana | Geneva, sans-serif |
| Geneva | Verdana, sans-serif |
| Tahoma | Arial, sans-serif |
| Trebuchet MS | Arial, sans-serif |
Web Safe Serif Fonts
| Font Family | Safe Fallback |
|---|---|
| Times New Roman | Times, serif |
| Georgia | serif |
Font Arial
body, h1, h2, h3, h4, h5, h6 {
font-family: Arial, Helvetica, sans-serif;
}
Try it Yourself »
Arial is considered the safest sans-serif font on the web. It is installed on all Windows machines and all Mac machines.
Helvetica is the preferred fallback because the two fonts are almost identical. Helvetica runs on all Mac machines but on fewer Windows machines.
Using Arial with Helvetica fallback, or Helvetica with Arial fallback, covers both worlds.
Font Helvetica
<style>
body, h1, h2, h3, h4, h5, h6 {
font-family: Helvetica, Arial, sans-serif;
}
</style>
Try It Yourself »
Font Verdana
body, h1, h2, h3, h4, h5, h6 {
font-family: Verdana, Geneva, sans-serif;
}
Try It Yourself »
Verdana is considered to be a web safe sans-serif font. It runs on all Windows machines, and all Mac Machines.
Geneva is Verdanas preferred fallback, because the two fonts are quite similar, and Geneva runs on all Mac machines (99.6%).
Font Tahoma
body, h1, h2, h3, h4, h5, h6 {
font-family: Tahoma, "Trebuchet MS", sans-serif;
}
Try It Yourself »
Tahoma was the standard font in Windows 95. It works on all Windows machines, and most Mac machines.
Font Trebuchet MS
body, h1, h2, h3, h4, h5, h6 {
font-family: "Trebuchet MS", Tahoma, sans-serif;
}
Try It Yourself »
Trebuchet MS has been released with all Windows operating systems since Microsoft Windows 2000. It is also included on Macs machines, iOS and Chrome OS.
Font Segoe UI
body, h1, h2, h3, h4, h5, h6 {
font-family: "Segoe UI", Arial, sans-serif
}
Try It Yourself »
Segoe UI is the default font in Windows (from Windows 10). It is also the default heading font in W3Schools and in W3.CSS.
Font Times New Roman
body, h1, h2, h3, h4, h5, h6 {
font-family: "Times New Roman", Times, serif;
}
Try It Yourself »
Times New Roman is considered the most web safe serif font. It works on all Windows machines and all Mac machines.
Some older operating systems might have an alternative version called Times, so it is smart to use Times as a fallback as well as serif.
Georgia is also considered very safe. It is a little larger than Times New Roman, but works well on Windows and Mac machines.
To be on the safe side, use serif as fallback.
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 |
|---|---|
| Courier New | monospace |
| Lucida Console | Monaco, monospace |
| Monaco | Lucida Console, monospace |
Note
There are no 100% web safe fonts, but you can always use w3-monospace.
Font Courier New
body, h1, h2, h3, h4, h5, h6 {
font-family: "Courier New", monospace;
}
Try it Yourself »
Courier New is considered the most web safe monospace font. It is installed on all Windows and Mac machines.
Font Lucida or Monaco
body, h1, h2, h3, h4, h5, h6 {
font-family: "Lucida Console", Monaco, monospace;
}
Try It Yourself »
Lucida Console does not run on Mac. Monaco does not run on Windows.
One solution is to use Monaco as fallback for Lucida Console.
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 »
