Alin Inayeh > Blog personal

Fonturi web cu @font-face

Probabil ca toti ne-am saturat sa folosim pe site-uri doar fonturi “web-safe” si sa ne limitam design-ul din cauza aceasta sau sa apelam la metode gen “sIFR” pentru a avea un titlu cu font-ul “X”. Cea mai usoara solutie pentru a putea folosi orice font pe un site este folosirea @font-face in CSS.

Solutia aceasta functioneaza pe toate browser-ele moderne (inclusiv IE6). Iti voi prezenta pasii pentru a adauga pe site orice font doresti:

1. In Control Panel in sectiunea Appearance and Personalization > Fonts sunt toate font-urile instalate pe PC. Trebuie sa copiezi fontul de care ai nevoie si sa-i dai paste pe Desktop sau in orice folder vrei. Probabil ca o sa ai mai multe versiuni; trebuie sa o alegi pe cea care e folosita in psd-ul site-ului (Bold, Regular, Book etc.).

2. Intra pe site-ul www.fontsquirrel.com/fontface/generator. Aici iti vei uploada fisierul .otf salvat din Control Panel.  Daca vrei sa-ti configurezi font-ul (de exemplu daca vrei caractere speciale) alege optiunea EXPERT.

3. Dupa ce ai configurat font-ul trebuie sa-l downloadezi. Vei descarca o arhiva .zip cu font-urile si cu un exemplu. Font-ul va veni in 4 formate deoarece fiecare browser functioneaza cu un alt format de font. Copiaza cele 4 fisiere undeva prin folderele site-ului.

4. In css-ul tau introdu urmatoarele linii:

@font-face {
    font-family: 'orice nume vrei tu pentru font';
    src: url('calea catre fisierul .eot');
    src: url('calea catre fisierul .eot + ?#iefix in coada') format('embedded-opentype'),
         url('calea catre fisierul .woff') format('woff'),
         url('calea catre fisierul .ttf') format('truetype'),
         url('calea catre fisierul .svg + #numele pe care l-ai dat fonutului in coada') format('svg');
    font-weight: normal; /* sau bold, depinde de ce font-weight are font-ul tau */
    font-style: normal; /* font-style-ul pe care-l are font-ul tau */
}

Acum ar trebui ca font-ul ales sa fie vazut de catre toti utilizatorii chiar daca nu au acel font in computer.

Adauga comentariu

Comentariul tau

trage sageata in dreapta pentru a trimite