Intr-un articol anterior scriam despre cum putem utiliza fonturi pe un website utilizand servicii precum Google Fonts API. Daca insa aveti un font comercial  sau unul free dar care nu este inclus in serviciile online de gazduire fonturi, atunci puteti utiliza proprietatea css 3.0: @font-face. Atentie! Aceasta proprietate este suportata in Internet Explorer 9.0+ (numai .eot), precum si in celelalte browsere importante

Iata un exemplu de cum se implementeaza fonturi custom pe un site pe care il dezvoltati:

Transformarea fonturilor si copierea lor pe server

Pentru web sunt necesare fonturi in anumite formate (opentype, truetype, eot etc.) Pentru a simplifica lucrurile puteti utiliza un serviciu online precum www.font2web.com Acesta va genereaza automat toate fonturile in formatele specifice. Ulterior copiati directorul de fonturi undeva pe serverul cu site-ul.

CSS @font-face

Veti avea probabil cate un fiser pentru fiecare tip de font: stil (italic, normal) si grosime (font-weight  - 300,500,700) pe care le veti putea grupa sub aceeasi familie. Evident pathurile si numele sunt specifice fiecarei implementari: local = Numele fontului daca este instalat pe computer (il puteti vedea din directorul Fonts in Windows), pentru a evita incarcarea fontului de pe site daca exista in computerul local url = Path-ul catre folderul cu fonturi din site

@font-face {  	font-family: 'MuseoSans';  	src: url('/public/fonts/MuseoSans_500.eot');  	src: local('Museo Sans 500'), url('/public/fonts/MuseoSans_500.woff') format('woff'), url('/public/fonts/MuseoSans_500.ttf') format('truetype'), url('/public/fonts/MuseoSans_500.svg') format('svg');  	font-weight: 500;  	font-style: normal;  }  @font-face {  	font-family: 'MuseoSans';  	src: url('/public/fonts/MuseoSans_500_Italic.eot');  	src: local('Museo Sans 500'), url('/public/fonts/MuseoSans_500_Italic.woff') format('woff'), url('/public/fonts/MuseoSans_500_Italic.ttf') format('truetype'), url('/public/fonts/MuseoSans_500_Italic.svg') format('svg');  	font-weight: 500;  	font-style: italic;  }

Acum puteti utiliza aceasta familie de fonturi normal in codul CSS. Eu prefer sa le fac cate o clasa specifica. Nu uitati sa aveti alternativ un font websafe asemanator pentru browserele vechi.

.museo {  	font-family:'MuseoSans',Verdana, Geneva, sans-serif;  }

Live DEMO

Astept intrebarile/impresiile voastre in comentariile de mai jos.