`@font-face (fonturi proprii)` în CSS

Reguli @ (at-rules) CSS3+ (WOFF2: Chrome 36, Firefox 39, Safari 10; font-display: Chrome 60, Firefox 58, Safari 11.1)

Încarcă un font propriu de pe server și îi dă un nume pe care îl folosești apoi în font-family.

Sintaxă CSS

@font-face {
  font-family: "Inter";
  src: url("/fonturi/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

Ce face `@font-face (fonturi proprii)`

Regula @font-face declară un font: numele sub care îl vei folosi (font-family), fișierul de unde se descarcă (src) și pentru ce grosime și stil este acel fișier. Declarația singură nu descarcă nimic: browserul cere fișierul abia când un element de pe pagină folosește numele respectiv.

Formatul recomandat astăzi este WOFF2, suportat de toate browserele actuale și mai mic decât TTF sau WOFF. Un font variabil conține toate grosimile într-un singur fișier; îl declari cu un interval: font-weight: 100 900.

font-display decide ce vede vizitatorul cât timp fontul se descarcă: cu swap textul apare imediat cu fontul de rezervă și se schimbă când sosește fontul propriu; cu optional browserul folosește fontul propriu doar dacă sosește foarte repede, altfel rămâne la rezervă (fără salt vizibil).

Valori uzuale

Valoare	Descriere
`font-family`	Numele ales pentru font, folosit apoi în regulile obișnuite (font-family: „Inter”, sans-serif).
`src`	Lista de surse: url(…) format(„woff2”), eventual local(„Nume font”) pentru un font instalat.
`font-weight / font-style`	Pentru ce grosime (sau interval, la fonturile variabile) și stil este fișierul.
`font-display`	auto, block, swap, fallback, optional: comportamentul cât timp fontul se încarcă.
`unicode-range`	Caracterele pentru care se descarcă fișierul (ex. doar latin extins pentru ă, ș, ț).
`size-adjust`	Scalează fontul de rezervă ca să aibă aceeași mărime vizuală ca fontul propriu.

Exemple

Exemplul 1: Font variabil cu grosimi de la 300 la 800

Un singur fișier WOFF2 acoperă toate grosimile folosite pe site, iar textul rămâne vizibil în timpul descărcării.

@font-face {
  font-family: "Inter";
  src: url("/fonturi/Inter-Variabil.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Inter", system-ui, sans-serif;
}
h1 { font-weight: 800; }
.nota-mica { font-weight: 300; }

Efect vizual în browser

La prima încărcare textul apare instant cu fontul sistemului, apoi trece la Inter. Titlul „Oferte de toamnă în Iași” e foarte gros (800), iar nota de subsol e subțire (300), ambele din același fișier.

Exemplul 2: Font de rezervă ajustat ca să nu „sară” textul

Declari o a doua față care folosește Arial instalat local, scalată ca să ocupe cam același spațiu ca fontul propriu.

@font-face {
  font-family: "Inter Rezerva";
  src: local("Arial");
  size-adjust: 107%;
}

body {
  font-family: "Inter", "Inter Rezerva", sans-serif;
}