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.