CSS Fonts
Fonts play a fundamental role in the appearance of websites. Choosing the right font greatly influences readability, design, and user experience.
Basic Syntax: font-family
With the <font-family> property, we can specify which font an element should use. It is always recommended to provide multiple alternatives (fallbacks) in case the main font is not available.
Default Fonts
Browsers include several built-in fonts, such as Arial, Times New Roman, or Courier New. These can be set easily.
Font Style and Typography
CSS allows us to use additional typographic settings: <font-weight> for weight, <line-height> for line spacing, and <letter-spacing> for spacing between characters.
Using Google Fonts
With Google Fonts, we can import free and modern fonts. For this, we use the <link> element in the <head> section, then reference it in CSS.
@font-face and Custom Fonts
We can also add our own fonts using the @font-face rule. In this case, we upload the font file (for example WOFF2) and then define it in CSS.
Tips for Using Fonts
Good typography improves readability and user experience. The following advice helps:
- Always specify fallback fonts.
- Avoid using too many different fonts on one page.
- Pay attention to responsive typography so that text remains easily readable on both mobile and desktop devices.
✨ Ask Lara — your AI study partner
Unlock personalized learning support. Lara can explain lessons, summarize topics, and answer your study questions — available from the Go plan and above.
Lara helps you learn faster — exclusive to ReadyTools Go, Plus, and Max members.
