Cu ceva timp in urma, va aratam o metoda foarte utila de a include orice font direct in browser fara a mai fi nevoie sa folsim imagini. Articolul il puteti gasi aici.
Ceea ce m-a nemultumit la articolul respectiv a fost faptul ca bucata de cod era pur exemplificativa. Cei dintre voi care au testat in mai multe browsere au observat ca nu toate afisau in mod corect font-ul. Acest lucru se intampla pentru ca nu toate browserele randeaza in acelasi fel font-urile.
Unele se inteleg bine cu formatul .ttf, altele cu .svg sau chiar .eot. Dar pentru a scrie un astfel de cod, dureaza mult si trebuie sa fii atent sa nu-ti scape vreun detaliu.
Din fericire, cei de la Font Squirrel vin in intampinarea designerilor si dezvoltatorilor. Ei ne pun la dispozitie un “@font-face generator” care ia un font si nu numai ca scrie codul complet pentru embed, dar face si conversia in toate formatele necesare.
Ce trebuie sa faceti? Pai, mergeti pe un site care pune la dispozitie font-uri si alegeti ce vi se potriveste. Mergeti la http://www.fontsquirrel.com/fontface/generator si incarcati font-ul. Eu nu m-am obosit sa schimb nicio setare pentru ca pareau sa-mi satisfaca nevoile asa cum erau, dar daca va simtiti creativi…
Veti obtine la final o arhiva cu un demo complet si cu toate resursele de care aveti nevoie. Ceea ce va intereseaza de fapt este fisierul stylesheet.css unde veti gasi codul pentru embed. El ar trebui sa arate asa:
@font-face {
font-family: 'ElderGodsBBRegular';
src: url('eldergodsbb-webfont.eot');
src: url('eldergodsbb-webfont.eot?iefix') format('eot'),
url('eldergodsbb-webfont.woff') format('woff'),
url('eldergodsbb-webfont.ttf') format('truetype'),
url('eldergodsbb-webfont.svg#webfontKD3Yq3Hs') format('svg');
font-weight: normal;
font-style: normal;
}
Nu uitati sa includeti si font-ul in toate formatele. Degeaba avem codul daca nu ii dam si fisierele sursa.
Gata. Asta este tot ce aveti de facut. Si de aceasta data exemplul va merge in orice browser. Apropos, pentru cei care au incercat exemplul precedent si au intampinat probleme, codul de mai sus foloseste acelasi font.
Asa ca este de ajuns sa luati arhiva pe care v-am pus-o la dispozitie si extrageti font-ul in toate formatele. Dupa aceea inlocuiti numai apelul @font-face din codul vostru si ar trebui sa mearga. Succes.