Fonturi Web în CSS: Import, Google Fonts și Optimizare Avansată

Fonturi Web

Fonturile web permit utilizarea unor tipografii personalizate care nu sunt instalate pe dispozitivele utilizatorilor. Acestea sunt descărcate automat odată cu site-ul, eliminând astfel limitările impuse de fonturile „web-safe”.

Importarea fonturilor cu @font-face

Pentru a importa un font personalizat, folosim blocul @font-face în fișierul CSS:


@font-face {
  font-family: "numeFont";
  src: url("fonts/numeFont.woff2") format("woff2"),
       url("fonts/numeFont.woff") format("woff");
}

Ulterior, putem aplica fontul în stilurile CSS:


html {
  font-family: "numeFont", "Georgia", serif;
}

Este recomandat să includem mai multe formate pentru compatibilitate maximă:


@font-face {
  font-family: 'ciclefina';
  src: url('fonts/cicle_fina-webfont.eot');
  src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'),
       url('fonts/cicle_fina-webfont.woff2') format('woff2'),
       url('fonts/cicle_fina-webfont.woff') format('woff'),
       url('fonts/cicle_fina-webfont.ttf') format('truetype'),
       url('fonts/cicle_fina-webfont.svg#ciclefina') format('svg');
  font-weight: normal;
  font-style: normal;
}

font-family: numele fontului definit
src: lista de fișiere și formate acceptate
font-weight/font-style: greutatea și stilul fontului

☞ Se pot adăuga și proprietăți precum font-variant, font-stretch sau unicode-range pentru optimizare.

Exemplu complet cu două fonturi locale

🔧 Exemplu fonturi locale

<h1>Acesta este titlul cu font personalizat</h1>
<p>Acesta este un paragraf cu un alt font personalizat.<p>

@font-face {
  font-family: "arvoregular";
  src: url("fonts/arvo-regular-webfont.woff2") format("woff2"),
       url("fonts/arvo-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "opensansregular";
  src: url("fonts/opensans-regular-webfont.woff2") format("woff2"),
       url("fonts/opensans-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: "opensansregular", sans-serif;
  font-size: 1.2rem;
  padding: 2rem;
}

h1 {
  font-family: "arvoregular", serif;
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

Utilizarea unui serviciu online - Google Fonts

Serviciile online precum Google Fonts oferă fonturi gratuite, gata de utilizat, fără a fi nevoie să scriem manual blocuri @font-face.

Tot ce trebuie să facem este să includem un link în <head>.

Și apoi să folosim fonturile în CSS:


body {
  font-family: 'Roboto', sans-serif;
}

h1 {
  font-family: 'Bree Serif', serif;
}

Exemplu complet cu Google Fonts

🔧 Exemplu Google Fonts

<!DOCTYPE html>
<html lang="ro">
<head>
  <meta charset="UTF-8">
  <title>Fonturi Google</title>
  <link href="https://fonts.googleapis.com/css2?family=Bree+Serif&family=Roboto&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: "Roboto", sans-serif;
      padding: 2rem;
    }
    h1 {
      font-family: "Bree Serif", serif;
      font-size: 2.5rem;
      margin-bottom: 1rem;
    }
  </style>
</head>
<body>
  <h1>Fontul Bree Serif</h1>
  <p>Acest paragraf folosește fontul Roboto.<p>
</body>
</html>

Optimizarea și bune practici în utilizarea fonturilor web

Fonturile personalizate pot îmbunătăți semnificativ aspectul unui site, dar este important să le folosim eficient pentru a evita probleme de performanță sau accesibilitate. Iată câteva recomandări esențiale:

1. Utilizarea proprietății `font-display`

Evitați „textul invizibil” în timpul încărcării fontului, folosind font-display: swap. Aceasta permite afișarea textului cu un font de rezervă până când fontul personalizat este disponibil.


@font-face {
  font-family: 'opensansregular';
  src: url('fonts/opensans-regular-webfont.woff2') format('woff2');
  font-display: swap;
}

2. Preîncărcarea fonturilor critice

Pentru fonturile folosite în elemente importante (titluri, paragrafe), se recomandă preîncărcarea în <head>:

3. Fallback-uri inteligente

Includeți întotdeauna fonturi de rezervă în font-family, pentru cazurile în care fontul principal nu se încarcă:


body {
  font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

4. Fonturi variabile (Variable Fonts)

Fonturile variabile permit utilizarea mai multor greutăți și stiluri dintr-un singur fișier. Sunt mai eficiente și mai flexibile:


@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-VariableFont.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
}

Ulterior, puteți aplica greutăți diferite:


h1 {
  font-weight: 700;
}
p {
  font-weight: 300;
}

5. Accesibilitate și contrast

Evitați fonturile decorative pentru paragrafe lungi.
Asigurați-vă că contrastul între text și fundal respectă standardele WCAG.
Testați fonturile pe ecrane mici și mari - unele fonturi pot fi greu de citit pe mobil.

6. Control avansat cu `font-feature-settings`

Fonturile OpenType permit activarea unor caracteristici speciale, cum ar fi ligaturi sau numerotare proporțională:


h1 {
  font-feature-settings: "liga" 1, "onum" 1;
}

7. Utilizarea `unicode-range`

Permite încărcarea doar a caracterelor necesare dintr-un font, reducând dimensiunea fișierului:


@font-face {
  font-family: 'opensansregular';
  src: url('fonts/opensans-regular-webfont.woff2') format('woff2');
  unicode-range: U+000-5FF; /* Latin Basic + Latin-1 Supplement */
}

☞ Pentru mai multe informații despre optimizarea fonturilor, consultați articolele:

🧠 Quiz - Fonturi Web

Stilizarea cutiilor ➔