Cum facem lucrurile sa functioneze, astazi

@font-face {

font-family:’some-font’;

src: url(‘some-font.eot#’)

format(’embedded-opentype’),

url(‘some-font.woff’) format(‘woff’),

url(‘some-font.ttf’)

format(‘truetype’),

url(‘some-font.svg#some-font’)

format(‘svg’);

}

Sunt incluse aici toate formatele de care aveti nevoie pentru a acoperi browserele care accepta @fontface. Fisierul EOT merge la ie, WOFF merge la Chrome, Firefox, Opera si Safari. TTF merge pe dispozitivele Android si iOS, impreuna cu alte browsere desktop mai vechi.  IE9 ofera suport pentru TTF, dar interpreteaza permisiunile de incorporare diferit fata de alte browsere: este mai bine sa-i oferim un WOFF sau EOT. iOS, in versiunile anterioare accepta numai fonturi SVG, iar unii utilizatori aleg sa nu isi actualizeze sistemul de operare iOS pe dispozitivele mai vechi – astfel incat este posibil sa aveti o multime de utilizatori ca acestia.

Si in final, in cazul in care fonturile provin de pe un alt domeniu, acestea trebuie transmise cu headerul Access-Control-Allow-Origin: *, astfel Firefox le vede ca pe o incalcare a politicii domeniului de origine si nu le va descarca.

Font Squirrel poate genera toate aceste formate iar daca doriti ceva mai specializat, exista FontForge si EOTFast. Poate ati observat parametrul # de la sfarsitul URL-ului pentru formatul EOT: acesta este necesar pentru a face regula aplicabila pentru IE8 si pentru versiunile mai anterioare.