CSS Fonts
Choosing the right font for your website is important!
Font Selection is Important
Choosing the right font has a huge impact on how the readers experience a website.
The right font can create a strong identity for your brand.
Using a font that is easy to read is important. The font adds value to your text. It is also important to choose the correct color and text size for the font.
Generic Font Families
In CSS there are five generic font families:
- Serif fonts have a small stroke at the edges of each letter. They create a sense of formality and elegance.
- Sans-serif fonts have clean lines (no small strokes attached). They create a modern and minimalistic look.
- Monospace fonts – here all the letters have the same fixed width. They create a mechanical look.
- Cursive fonts imitate human handwriting.
- Fantasy fonts are decorative/playful fonts.
All the different font names belong to one of the generic font families.
Difference Between Serif and Sans-serif Fonts
Note: On computer screens, sans-serif fonts are considered easier to read than serif fonts.
Some Font Examples
| Generic Font Family | Examples of Font Names |
|---|---|
| Serif | Times New Roman Georgia Garamond |
| Sans-serif | Arial Verdana Helvetica |
| Monospace | Courier New Lucida Console Monaco |
| Cursive | Brush Script MT Lucida Handwriting |
| Fantasy | Copperplate Papyrus |
ADVERTISEMENT
The CSS font-family Property
In CSS, we use the font-family property to specify the font of a text.
Note: If the font name is more than one word, it must be in quotation marks, like: “Times New Roman”.
Tip: The font-family property should hold several font names as a “fallback” system, to ensure maximum compatibility between browsers/operating systems. Start with the font you want, and end with a generic family (to let the browser pick a similar font in the generic family, if no other fonts are available). The font names should be separated with comma. Read more about fallback fonts in the next chapter.
Example
Specify some different fonts for three paragraphs:
.p1 {
font-family: “Times New Roman”, Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: “Lucida Console”, “Courier New”, monospace;
}
CSS Web Safe Fonts
What are Web Safe Fonts?
Web safe fonts are fonts that are universally installed across all browsers and devices.
Fallback Fonts
However, there are no 100% completely web safe fonts. There is always a chance that a font is not found or is not installed properly.
Therefore, it is very important to always use fallback fonts.
This means that you should add a list of similar “backup fonts” in the font-family property. If the first font does not work, the browser will try the next one, and the next one, and so on. Always end the list with a generic font family name.
Example
Here, there are three font types: Tahoma, Verdana, and sans-serif. The second and third fonts are backups, in case the first one is not found.
p {
font-family: Tahoma, Verdana, sans-serif;
}
Best Web Safe Fonts for HTML and CSS
The following list are the best web safe fonts for HTML and CSS:
- Arial (sans-serif)
- Verdana (sans-serif)
- Helvetica (sans-serif)
- Tahoma (sans-serif)
- Trebuchet MS (sans-serif)
- Times New Roman (serif)
- Georgia (serif)
- Garamond (serif)
- Courier New (monospace)
- Brush Script MT (cursive)
Note: Before you publish your website, always check how your fonts appear on different browsers and devices, and always use fallback fonts!
ADVERTISEMENT
Arial (sans-serif)
Arial is the most widely used font for both online and printed media. Arial is also the default font in Google Docs.
Arial is one of the safest web fonts, and it is available on all major operating systems.
Example
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Verdana (sans-serif)
Verdana is a very popular font. Verdana is easily readable even for small font sizes.
Example
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Helvetica (sans-serif)
The Helvetica font is loved by designers. It is suitable for many types of business.
Example
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Tahoma (sans-serif)
The Tahoma font has less space between the characters.
Example
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Trebuchet MS (sans-serif)
Trebuchet MS was designed by Microsoft in 1996. Use this font carefully. Not supported by all mobile operating systems.
Example
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Times New Roman (serif)
Times New Roman is one of the most recognizable fonts in the world. It looks professional and is used in many newspapers and “news” websites. It is also the primary font for Windows devices and applications.
Example
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Georgia (serif)
Georgia is an elegant serif font. It is very readable at different font sizes, so it is a good candidate for mobile-responsive design.
Example
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Garamond (serif)
Garamond is a classical font used for many printed books. It has a timeless look and good readability.
Example
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Courier New (monospace)
Courier New is the most widely used monospace serif font. Courier New is often used with coding displays, and many email providers use it as their default font. Courier New is also the standard font for movie screenplays.
Example
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Brush Script MT (cursive)
The Brush Script MT font was designed to mimic handwriting. It is elegant and sophisticated, but can be hard to read. Use it carefully.
Example
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Tip: Also check out all available Google Fonts and how to use them.
CSS Font Fallbacks
Commonly Used Font Fallbacks
Below are some commonly used font fallbacks, organized by the 5 generic font families:
- Serif
- Sans-serif
- Monospace
- Cursive
- Fantasy
Serif Fonts
| font-family | Example text | Code |
|---|---|---|
| “Times New Roman”, Times, serif | This is a HeadingThis is a paragraph. | Try it |
| Georgia, serif | This is a HeadingThis is a paragraph. | Try it |
| Garamond, serif | This is a HeadingThis is a paragraph. | Try it |
Sans-Serif Fonts
| font-family | Example text | Code |
|---|---|---|
| Arial, Helvetica, sans-serif | This is a HeadingThis is a paragraph. | Try it |
| Tahoma, Verdana, sans-serif | This is a HeadingThis is a paragraph. | Try it |
| “Trebuchet MS”, Helvetica, sans-serif | This is a HeadingThis is a paragraph. | Try it |
| Geneva, Verdana, sans-serif | This is a HeadingThis is a paragraph. | Try it |
ADVERTISEMENT
Monospace Fonts
| font-family | Example text | Code |
|---|---|---|
| “Courier New”, Courier, monospace | This is a HeadingThis is a paragraph. | Try it |
Cursive Fonts
| font-family | Example text | Code |
|---|---|---|
| “Brush Script MT”, cursive | This is a HeadingThis is a paragraph. | Try it |
Fantasy Fonts
| font-family | Example text | Code |
|---|---|---|
| Copperplate, Papyrus, fantasy | This is a HeadingThis is a paragraph. | Try it |
Tip: Also check out all available Google Fonts and how to use them.
CSS Font Style
Font Style
The font-style property is mostly used to specify italic text.
This property has three values:
- normal – The text is shown normally
- italic – The text is shown in italics
- oblique – The text is “leaning” (oblique is very similar to italic, but less supported)
Example
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
Font Weight
The font-weight property specifies the weight of a font:
Example
p.normal {
font-weight: normal;
}
p.thick {
font-weight: bold;
}
Font Variant
The font-variant property specifies whether or not a text should be displayed in a small-caps font.
In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters appears in a smaller font size than the original uppercase letters in the text.
Example
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
CSS Font Size
Font Size
The font-size property sets the size of the text.
Being able to manage the text size is important in web design. However, you should not use font size adjustments to make paragraphs look like headings, or headings look like paragraphs.
Always use the proper HTML tags, like <h1> – <h6> for headings and <p> for paragraphs.
The font-size value can be an absolute, or relative size.
Absolute size:
- Sets the text to a specified size
- Does not allow a user to change the text size in all browsers (bad for accessibility reasons)
- Absolute size is useful when the physical size of the output is known
Relative size:
- Sets the size relative to surrounding elements
- Allows a user to change the text size in browsers
Note: If you do not specify a font size, the default size for normal text, like paragraphs, is 16px (16px=1em).
Set Font Size With Pixels
Setting the text size with pixels gives you full control over the text size:
Example
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
Tip: If you use pixels, you can still use the zoom tool to resize the entire page.
Set Font Size With Em
To allow users to resize the text (in the browser menu), many developers use em instead of pixels.
1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px.
The size can be calculated from pixels to em using this formula: pixels/16=em
Example
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
}
In the example above, the text size in em is the same as the previous example in pixels. However, with the em size, it is possible to adjust the text size in all browsers.
Unfortunately, there is still a problem with older versions of Internet Explorer. The text becomes larger than it should when made larger, and smaller than it should when made smaller.
ADVERTISEMENT
Use a Combination of Percent and Em
The solution that works in all browsers, is to set a default font-size in percent for the <body> element:
Example
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
Our code now works great! It shows the same text size in all browsers, and allows all browsers to zoom or resize the text!
Responsive Font Size
The text size can be set with a vw unit, which means the “viewport width”.
That way the text size will follow the size of the browser window:
Hello World
Resize the browser window to see how the font size scales.
Example
<h1 style=”font-size:10vw“>Hello World</h1>
Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.
CSS Google Fonts
Google Fonts
If you do not want to use any of the standard fonts in HTML, you can use Google Fonts.
Google Fonts are free to use, and have more than 1000 fonts to choose from.
How To Use Google Fonts
Just add a special style sheet link in the <head> section and then refer to the font in the CSS.
Example
Here, we want to use a font named “Sofia” from Google Fonts:
<head>
<link rel=”stylesheet” href=”https://fonts.googleapis.com/css?family=Sofia”>
<style>
body {
font-family: “Sofia”, sans-serif;
}
</style>
</head>
Result:
Sofia Font
Lorem ipsum dolor sit amet.
123456790
Example
Here, we want to use a font named “Trirong” from Google Fonts:
<head>
<link rel=”stylesheet” href=”https://fonts.googleapis.com/css?family=Trirong”>
<style>
body {
font-family: “Trirong”, serif;
}
</style>
</head>
Result:
Trirong Font
Lorem ipsum dolor sit amet.
123456790
Example
Here, we want to use a font named “Audiowide” from Google Fonts:
<head>
<link rel=”stylesheet” href=”https://fonts.googleapis.com/css?family=Audiowide”>
<style>
body {
font-family: “Audiowide”, sans-serif;
}
</style>
</head>
Result:
Audiowide Font
Lorem ipsum dolor sit amet.
123456790
Note: When specifying a font in CSS, always list at minimum one fallback font (to avoid unexpected behaviors). So, also here you should add a generic font family (like serif or sans-serif) to the end of the list.
For a list of all available Google Fonts, visit our How To – Google Fonts Tutorial.
Use Multiple Google Fonts
To use multiple Google fonts, just separate the font names with a pipe character (|), like this:
Example
Request multiple fonts:
<head>
<link rel=”stylesheet” href=”https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong”>
<style>
h1.a {font-family: “Audiowide”, sans-serif;}
h1.b {font-family: “Sofia”, sans-serif;}
h1.c {font-family: “Trirong”, serif;}
</style>
</head>
Result:
Audiowide Font
Sofia Font
Trirong Font
Note: Requesting multiple fonts may slow down your web pages! So be careful about that.
ADVERTISEMENT
Styling Google Fonts
Of course you can style Google Fonts as you like, with CSS!
Example
Style the “Sofia” font:
<head>
<link rel=”stylesheet” href=”https://fonts.googleapis.com/css?family=Sofia”>
<style>
body {
font-family: “Sofia”, sans-serif;
font-size: 30px;
text-shadow: 3px 3px 3px #ababab;
}
</style>
</head>
Result:
Sofia Font
Lorem ipsum dolor sit amet.
123456790
Enabling Font Effects
Google have also enabled different font effects that you can use.
First add effect=effectname to the Google API, then add a special class name to the element that is going to use the special effect. The class name always starts with font-effect- and ends with the effectname.
Example
Add the fire effect to the “Sofia” font:
<head>
<link rel=”stylesheet” href=”https://fonts.googleapis.com/css?family=Sofia&effect=fire”>
<style>
body {
font-family: “Sofia”, sans-serif;
font-size: 30px;
}
</style>
</head>
<body>
<h1 class=”font-effect-fire”>Sofia on Fire</h1>
</body>
Result:
Sofia on Fire
To request multiple font effects, just separate the effect names with a pipe character (|), like this:
Example
Add multiple effects to the “Sofia” font:
<head>
<link rel=”stylesheet” href=”https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple”>
<style>
body {
font-family: “Sofia”, sans-serif;
font-size: 30px;
}
</style>
</head>
<body>
<h1 class=”font-effect-neon”>Neon Effect</h1>
<h1 class=”font-effect-outline”>Outline Effect</h1>
<h1 class=”font-effect-emboss”>Emboss Effect</h1>
<h1 class=”font-effect-shadow-multiple”>Multiple Shadow Effect</h1>
</body>
Result:
Neon Effect
Outline Effect
Emboss Effect
Multiple Shadow Effect
CSS Great Font Pairings
Great font pairings are essential to great design.
Font Pairing Rules
Here are some basic rules to create great font pairings:
1. Complement
It is always safe to find font pairings that complement one another.
A great font combination should harmonize, without being too similar or too different.
2. Use Font Superfamilies
A font superfamily is a set of fonts designed to work well together. So, using different fonts within the same superfamily is safe.
For example, the Lucida superfamily contains the following fonts: Lucida Sans, Lucida Serif, Lucida Typewriter Sans, Lucida Typewriter Serif and Lucida Math.
3. Contrast is King
Two fonts that are too similar will often conflict. However, contrasts, done the right way, brings out the best in each font.
Example: Combining serif with sans serif is a well known combination.
A strong superfamily includes both serif and sans serif variations of the same font (e.g. Lucida and Lucida Sans).
4. Choose Only One Boss
One font should be the boss. This establishes a hierarchy for the fonts on your page. This can be achieved by varying the size, weight and color.
Example
No doubt “Georgia” is the boss here:
body {
background-color: black;
font-family: Verdana, sans-serif;
font-size: 16px;
color: gray;
}
h1 {
font-family: Georgia, serif;
font-size: 60px;
color: white;
}
Below, we have shown some popular font pairings that will suit many brands and contexts.
Georgia and Verdana
Georgia and Verdana is a classic combination. It also sticks to the web safe font standards:
Example
Use the “Georgia” font for headings, and “Verdana” for text:
Beautiful Norway
Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.
Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.
Helvetica and Garamond
Helvetica and Garamond is another classic combination that uses web safe fonts:
Example
Use the “Helvetica” font for headings, and “Garamond” for text:
Beautiful Norway
Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.
Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.
Popular Google Font Pairings
If you do not want to use standard fonts in HTML, you can use Google Fonts.
Google Fonts are free to use, and have more than 1000 fonts to choose from.
Below are some popular Google Web Font Pairings.
Merriweather and Open Sans
Example
Use the “Merriweather” font for headings, and “Open Sans” for text:
Beautiful Norway
Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.
Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.
Ubuntu and Lora
Example
Use the “Ubuntu” font for headings, and “Lora” for text:
Beautiful Norway
Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.
Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.
Abril Fatface and Poppins
Example
Use the “Abril Fatface” font for headings, and “Poppins” for text:
Beautiful Norway
Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.
Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.
Cinzel and Fauna One
Example
Use the “Cinzel” font for headings, and “Fauna One” for text:
Beautiful Norway
Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.
Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.
Fjalla One and Libre Baskerville
Example
Use the “Fjalla One” font for headings, and “Libre Baskerville” for text:
Beautiful Norway
Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.
Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.
Space Mono and Muli
Example
Use the “Space Mono” font for headings, and “Muli” for text:
Beautiful Norway
Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.
Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.
Spectral and Rubik
Example
Use the “Spectral” font for headings, and “Rubik” for text:
Beautiful Norway
Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.
Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.
Oswald and Noto Sans
Example
Use the “Oswald” font for headings, and “Noto Sans” for text:
Beautiful Norway
Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.
Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.
For a list of all free Google Fonts, visit our How To – Google Fonts Tutorial.
CSS Font Property
The CSS Font Property
To shorten the code, it is also possible to specify all the individual font properties in one property.
The font property is a shorthand property for:
font-stylefont-variantfont-weightfont-size/line-heightfont-family
Note: The font-size and font-family values are required. If one of the other values is missing, their default value are used.
Example
Use font to set several font properties in one declaration:
p.a {
font: 20px Arial, sans-serif;
}
p.b {
font: italic small-caps bold 12px/30px Georgia, serif;
}
Test Yourself With Exercises
Exercise:
Set the font for <h1> to “Verdana”.
<style>
h1 {
: Verdana;
}
</style>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
</body>
Submit Answer »
All CSS Font Properties
| Property | Description |
|---|---|
| font | Sets all the 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 or not a text should be displayed in a small-caps font |
| font-weight | Specifies the weight of a font |