Fontul este una dintre cele mai importante proprietati ale textului.

Dar nu trebuie sa ne limitam la fonturile pe care cineva le are pe calculator si putem incarca noi un font extern pe care sa il folosim in pagina.

Aceasta regula se numeste font-face: 

@font-face {
    font-family: "Font nou";
    src: url('font.woff') format('woff');
}

Aceasta regula functioneaza putin altfel decat celelalte pentru ca nu se aplica pe un singur element ci pe toate pagina.

Desi scriem @font-face inaintea parantezelor acolade, acesta nu este un selector.

In interiorul parantezelor avem doua reguli foarte importante:

  • font-family: prin care setam ce nume va avea acest font in pagina. Aceasta valoare o vom folosi atunci cand vrem sa schimbam fontul pe un element (folosind proprietatea font-family)
  • src: prescurtare ce vine de la source si prin care setam locul de unde va fi incarcat acest font. Aceasta regula este impartita in doua: url (prin care precizam url-ul unde se gaseste fontul) si format (in ce format este fontul).

Cum folosim noul font in pagina

Atunci cand vrem sa folosim acest font, vom scrie pe un element regula font-family iar prima valoare va fi numele care l-am dat mai sus: 

body {
    font-family: “Font nou”, Arial, sans-serif;
}

Dupa acesta este indicat sa precizam si alte alternative in cazul in care browserul nu poate descarca acel fisier.

Performanta

Trebuie sa luam in calcul si cum va influenta performanta paginii folosirea unui font nou.

Un fisier cu un font nou poate ocupa cativa zeci de Kb daca nu si sute.

Inainte de a folosi in pagina o astfel de regula, trebuie sa ne gandim daca intr-adevar avem nevoie de font nou.

< Înapoi Către exercițiu >