What are CSS Fonts?

CSS Font property is used to make your fonts attractive and pleasing to the eyes. You can use different fonts for your headings, paragraphs, and word emphasizing.

CSS Font property is way smarter than HTML Font Tag. HTML font Tag was used till HTML 4, but in HTML 5, it was deprecated. You can no longer use it, but it was an inferior option compared to the CSS Font property.

CSS Fonts has multiple options to give style to the fonts. You can alter the color, size, weight, and family of the fonts. You can assign various font families at once as a replacement if one is not supported. Let's look at multiple CSS Font properties and their uses:

CSS Font Properties

Values	Description
Font family	Assign font-families to the text.
Font color	It assigns the color of the text.
Font style	It makes the font bold, italic or oblique.
Font variant	It creates a small-caps effect.
Font size	It assigns the size of the font.
Font weight	It controls the thickness of the font.

CSS Font Family - What is Font Family?

Font Families are a set of different fonts with a similar design. These fonts under one family differ in size, weight, and style, but the characters' basic design would be the same. For example - Arial is a Font family with fonts Arial regular, Arial Bold, Arial Italic, etc.

CSS Font family property let us assign multiple font families at once. It doesn't mean that all families will be loaded and used together. Instead, the second one will be used if the browser does not support the first font, and the third one will be used if the second font is not supported. It works in a particular order of priority.

Look at the example below and go to our online editor and change the font order to see the changes.

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Font Family </title>
<meta charset="UTF-8">
<style>
#font{
font-family: "Times New Roman", Times, serif;
}
#para{
font-family: sans-serif;
}
</style>
</head>
<body>
<h1 id="font">CSS font-family</h1>
<p id="font">This is a paragraph, shown in the Times New Roman font.</p>
<p id="para">This is a paragraph, shown in the Arial font.</p>
</body>
</html>

Output

CSS Font Family

CSS font-family

This is a paragraph, shown in the Times New Roman font.

This is a paragraph, shown in the Arial font.

CSS Font Color

Fonts' color is very important for the look and feel of the website. You can give colors to hyperlinks, to highlight them. Headings can be colored in a different color than regular paragraph text.

To change the color of a particular section of the website like paragraph and headings, Class, ID, and tag selectors will always help. If you don't know about class, ID, and other selectors, please read our CSS Selectors article.

Different methods to specify the Font Color

There are three methods to give color to the font:

Use Color Name: Green, Blue, Red
Use Hex code for colors: #ffffff (White), #000000 (Black). Use our Color Picker Tool
Use RGB Values: rgb(red, green, blue). (128, 0, 0) Maroon, (165,42,42) Brown. RGB Picker Tool

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Font Color </title>
<meta charset="UTF-8">
<style>
h1 {
color: green;
}
h2 {
color: #9000A1;
}
p {
color:rgb(100, 150, 99);
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
</body>
</html>

Output

CSS Font Color

This is heading 1

This is heading 2

This is a paragraph.

CSS Font size

CSS font-size font-size property is used to specify size of the font. The default size is 16px. Font size can be given in pixels, em(1em=16px), or in percentage value. There are also some other predefined values given below :

CSS Font Properties

Font Size Values	Description
x-small	It displays extra small text.
xx-small	It display extremely small text.
small	It displays small text.
smaller	It displays comparatively smaller text.
medium	It displays medium text size.
large	It displays large text size.
x-large	It displays extra large text size.
xx-large	It displays extremely large text size.
larger	It displays comparatively larger text size.
Size in pixels or %	It sets the value in percentage and pixels.

You can check the example below to see the changes made by all the values.

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Font Size </title>
<meta charset="UTF-8">
</head>
<body>
<p style="font-size:xx-small;"> This font size is extremely small.</p>
<p style="font-size:x-small;"> This font size is extra small</p>
<p style="font-size:smaller;"> This font size is smaller. </p>
<p style="font-size:small;"> This font size is small</p>
<p style="font-size:medium;"> This font size is medium. </p>
<p style="font-size:large;"> This font size is large. </p>
<p style="font-size:larger;"> This font size is larger. </p>
<p style="font-size:20px;"> This font size is 20 pixels. </p>
<p style="font-size:x-large;"> This font size is extra large. </p>
<p style="font-size:xx-large;"> This font size is extremely large. </p>
<p style="font-size:200%;"> This font size is set on 200%. </p>
</body>
</html>

Output

CSS Font Size

This font size is extremely small.

This font size is extra small

This font size is smaller.

This font size is small

This font size is medium.

This font size is large.

This font size is larger.

This font size is 20 pixels.

This font size is extra large.

This font size is extremely large.

This font size is set on 200%.

CSS Font Style

Font Styles property in CSS is used to make the font italic. The Italic font is slightly tilted towards the right.

Font style property has three values. One is normal and the other two are slightly different versions of italic:

font-style: normal;
font-style: italic;
font-style: oblique;

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Font Style </title>
<meta charset="UTF-8">
<style>
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
</head>
<body>
<p class="normal">This paragraph is shown in normal style.</p>
<p class="italic">This paragraph is shown in italic style.</p>
<p class="oblique">This paragraph is shown in oblique style.</p>
</body>
</html>

Output

CSS Font Style

This paragraph is shown in normal style.

This paragraph is shown in italic style.

This paragraph is shown in oblique style.

CSS Font Variant

Font variant property is fun. It changes the font into small caps. In Small-caps font, all the lowercase alphabets are changed to uppercase, but their size doesn't change. It means that the changed uppercase alphabets are displayed in the size of lowercase alphabets.

There are two values of font-variant property:

font-variant: normal;
font-variant: small-caps;

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Font Variant </title>
<meta charset="UTF-8">
<style>
p { font-variant: small-caps; }
h2 { font-variant: normal; }
</style>
</head>
<body>
<h2>This heading is shown in normal font.</h2>
<p>This paragraph is shown in small font.</p>
</body>
</html>

Output

CSS Font Variant

This heading is shown in normal font.

This paragraph is shown in small font.

CSS Font Weight

CSS font-weight property defines the weight of the font, i.e., how thick a font is. It is used to emphasize a particular piece of text or in headings.

Font-weight can be applied either by using specific text values or by numbers:

font-weight: normal;
font-weight: lighter;
font-weight: bold;
font-weight: 500;

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Font Weight </title>
<meta charset="UTF-8">
<style>
p.normal {
font-weight: normal;
}
p.light {
font-weight: lighter;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 900;
}
</style>
</head>
<body>
<p class="normal">This is a paragraph.</p>
<p class="light">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>
</body>
</html>

Output

CSS Font Weight

This is a paragraph.

Recommended :

1 . How to use Syntax in CSS ?
2 . Html Paragraph Tag
3 . How to Change the Font With CSS ?
4 . Learn CSS Navigation Bar

5 . CSS beautiful buttons
6 . CSS 3 Transition
7 . Create Simple Login Form
8 . Photography Snippets using HTML and CSS

Web Developement Courses
BootStrap Snippets
JS Keywords
Form Events
CSS Navbar
JS Objects
Cookies
Forms
Icons
Buttons
Progress
Footer
Errors