In this chapter, we will learn about CSS properties for styling fonts. Fonts are an essential part of web design, as they impact the readability and aesthetics of text content. We will cover:
- Font Family
- Font Size
- Font Weight
- Font Style
- Font Variant
- Line Height
- Font Shorthand Property
- Web Fonts
Font Family
The font-family property specifies the font to be used for an element. You can list multiple font families as a fallback system, in case the first specified font is not available.
Syntax
element {
font-family: "font1", "font2", generic-family;
}
Example
p {
font-family: "Arial", "Helvetica", sans-serif;
}
Font Size
The font-size property sets the size of the font. It can be specified using various units such as pixels (px), ems (em), percentages (%), and more.
Syntax
element {
font-size: value;
}
Example
p {
font-size: 16px;
}
Example with Different Units
h1 {
font-size: 2em;
}
p {
font-size: 80%;
}
Font Weight
The font-weight property sets the weight (or boldness) of the font. It can be specified using predefined keywords or numeric values.
Values
normal: Default weightbold: Bold weightbolder: Bolder than the inherited weightlighter: Lighter than the inherited weight100to900: Numeric values indicating weight, where400is normal and700is bold
Syntax
element {
font-weight: value;
}
Example
p {
font-weight: bold;
}
h1 {
font-weight: 700;
}
Font Style
The font-style property sets the style of the font. It can be used to italicize text.
Values
normal: Default styleitalic: Italic textoblique: Oblique text
Syntax
element {
font-style: value;
}
Example
p {
font-style: italic;
}
Font Variant
The font-variant property sets the small-caps effect for text.
Values
normal: Default variantsmall-caps: Small-caps variant
Syntax
element {
font-variant: value;
}
Example
p {
font-variant: small-caps;
}
Line Height
The line-height property sets the height between lines of text. This can improve readability and control the spacing of text within an element.
Syntax
element {
line-height: value;
}
Example
p {
line-height: 1.5;
}
Font Shorthand Property
The font shorthand property allows you to set multiple font properties in one declaration.
Syntax
element {
font: font-style font-variant font-weight font-size/line-height font-family;
}
Example
p {
font: italic small-caps bold 16px/1.5 "Arial", sans-serif;
}
Web Fonts
Web fonts allow you to use custom fonts on your web pages. You can include web fonts using the @font-face rule or through web font services like Google Fonts.
Using @font-face
The @font-face rule allows you to define custom fonts by specifying the font name and the URL to the font file.
Syntax
@font-face {
font-family: "CustomFont";
src: url("path/to/font.woff2") format("woff2"),
url("path/to/font.woff") format("woff");
}
element {
font-family: "CustomFont", fallback-font, generic-family;
}
Example
@font-face {
font-family: "Roboto";
src: url("fonts/roboto.woff2") format("woff2"),
url("fonts/roboto.woff") format("woff");
}
body {
font-family: "Roboto", sans-serif;
}
Using Google Fonts
Google Fonts is a popular web font service that allows you to easily include custom fonts on your web pages.
Example
- Go to Google Fonts.
- Choose a font and click "Select this style".
- Copy the provided
<link>element and paste it into the<head>section of your HTML document.
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
- Apply the font to your elements using the
font-familyproperty.
body {
font-family: "Roboto", sans-serif;
}
Examples of Using Font Properties
Example 1: Styling Headings
h1 {
font-family: "Georgia", serif;
font-size: 36px;
font-weight: bold;
font-style: italic;
}
HTML
<h1>Styled Heading</h1>
Example 2: Styling Paragraphs
p {
font-family: "Verdana", sans-serif;
font-size: 14px;
line-height: 1.6;
font-variant: small-caps;
}
HTML
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris.</p>
Conclusion
In this chapter, you learned about various CSS font properties, including how to set the font family, size, weight, style, variant, line height, and how to use the font shorthand property. You also learned about web fonts and how to include custom fonts on your web pages. These properties allow you to control the appearance and readability of text on your web pages, enhancing the overall user experience.