Web Fonts
Web fonts allow you to use custom fonts on a website instead of depending only on fonts installed on the user's computer.
1. Using a Google Font
Google Fonts provides many ready-to-use web fonts. The font can be imported using CSS.
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
body {
font-family: 'Poppins', sans-serif;
}
The @import rule loads the Poppins font.
The font-family property applies Poppins
to the webpage.
Output
Welcome to CIIT Training Institute
Learn CSS with practical examples.
2. Applying a Web Font to a Heading
A web font can be applied only to selected elements such as headings.
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
h2 {
font-family: 'Roboto', sans-serif;
}
Here, the Roboto font is applied specifically
to the h2 element.
Output
CIIT Training Institute
Master CSS step by step.
3. Using a Font Fallback
A fallback font can be specified in case the web font cannot be loaded.
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
body {
font-family: 'Poppins', Arial, sans-serif;
}The browser first tries to use Poppins. If Poppins is unavailable, it uses Arial. If Arial is also unavailable, it uses a generic sans-serif font.
Output
Learn Web Development at CIIT Training Institute.
Common Web Font Properties
| Property | Purpose |
|---|---|
font-family |
Specifies the font to use. |
@import |
Imports an external font stylesheet. |
font-size |
Controls the size of the text. |
font-weight |
Controls the thickness of the text. |
font-style |
Controls normal, italic or oblique text. |
Summary
Web fonts allow websites to use custom fonts.
CSS can import fonts from services such as Google Fonts
and apply them using the font-family property.
A fallback font should also be provided for better reliability.