@font-face este o regulă CSS care permite afișarea fonturilor în paginile web de pe internet. Înainte de a exista această regulă, administratorii de site-uri web puteau folosi pe site-urile lor un set limitat de fonturi, care sunt cele mai comune și instalate pe computerele utilizatorilor. Odată cu apariția @font-face, orice font specific poate fi atașat cu ușurință la un site web.
Dacă ați descărcat fontul de pe site-ul nostru, în arhiva cu fonturi veți găsi un cod CSS gata pregătit, care trebuie copiat și pus în documentul CSS atașat proiectului.
Instalare pas cu pas
1. Selectați fontul dorit și faceți clic pe "download for website".
2. În rădăcina site-ului dvs. creați un folder fonturi și copiați fonturile descărcate.
Deschideți documentul CSS și copiați în el conținutul fișierului text din arhivă.
4. Asigurați-vă că drumul către folderul de fonturi este scris corect. În funcție de poziția dosarului în care se află fonturile, calea poate conține unul sau mai multe puncte.
5. S-a făcut. Copiați proprietatea cu numele de familie și lipiți-o în selectorul pentru care scrieți stilurile.
Ce se întâmplă dacă am descărcat deja fontul în altă parte și vreau să-l conectez?
În acest caz, trebuie să găsiți un convertor de fonturi pe internet și să convertiți fontul ttf (sau otf) în formatele potrivite, și anume eot, svg, woff și woff2. Acest lucru este pentru a vă asigura că fontul se afișează și funcționează corect în toate browserele, precum și pe dispozitivele mobile.
Apoi trebuie să scrieți regula @font-face, respectând sintaxa acesteia.
Sintaxa pentru @font-face
Sintaxa regulii poate fi împărțită în linii mari în proprietăți de bază și proprietăți avansate.
De bază:
- font-family - specifică numele fontului.
- src - indică traseul fontului. Acesta poate fi URL-ul fontului localizat pe serverul site-ului dvs. web, URL-urile fonturilor localizate pe serverul altcuiva (cum ar fi Google Fonts) sau pur și simplu numele fontului localizat pe computerul utilizatorului (Helvetica New Bold, Tahoma, Georgia etc.) .
Extinse:
- font-display - determină modul în care va apărea fontul, în funcție de faptul că a fost descărcat și este gata de utilizare.
- font-stretch - vă permite să reglați lățimea textului.
- font-style - determină dacă fontul este simplu, italic sau înclinat (ultimele două nu sunt același lucru).
- font-weight - Setează saturația fontului, pe o scară de la 100 la 900 (100-small, 900-small).
- font-variant - determinați modul în care trebuie prezentate literele minuscule - lăsați-le nemodificate sau faceți-le pe toate cu minuscule (majuscule).
- font-feature-settings - vă permite să gestionați caracteristicile tipografice avansate din fonturile OpenType.
- font-variations-settings - permite un control la nivel inferior asupra variațiilor fonturilor Open Type și TrueType prin specificarea unor nume de axă din patru litere.
- unicode-range - specifică gama de coduri Unicode (glife) care urmează să fie utilizate în font.
Conectarea unui font la site-ul dvs. cu Google Fonts
Utilizarea Google Fonts este cel mai simplu mod de a conecta un font la site-ul dumneavoastră. Mergeți pe site-ul lor, găsiți fontul dorit, alegeți fonturile potrivite pentru a le instala și copiați codul.
Codul copiat trebuie să fie plasat în corpul etichetei head, pe pagina dvs. html.
Dezavantajul acestei metode este că dacă în timpul realizării site-ului ați pierdut internetul - fonturile nu vor fi afișate și înlocuite cu cele standard, deoarece fișierele nu se află pe calculatorul local, ci pe serverele Google. De asemenea, sunt șanse ca atunci când veniți la client pentru prezentarea machetei (sau doar pentru conformare) și acesta nu are Wi-Fi, problema se va repeta.
