CSS tips #2 – czcionki

Wczoraj kodując jeden z projektów napotkałem na problem z @font-face w Firefoxie (tak, tak tym razem nie w IE :P). Mianowicie FF nie odczytuje plików .eot ani .ttf. Na szczęście problem ten możemy rozwiązać w bardzo prosty sposób – dodając inne formaty czcionki do @font-face:

@font-face {
    font-family: "Ubuntu";
    src: url('fonts/Ubuntu.eot?') format('eot'), 
	 url('fonts/Ubuntu.woff') format('woff'), 
	 url('fonts/Ubuntu.ttf')  format('truetype'),
	 url('fonts/Ubuntu.svg#fonts/Ubuntu') format('svg');
}

Teraz musimy tylko wygenerować pliki w odpowiednim formacie. Osobiście używam tego narzędzia. Z moich testów wynika, że reguła ta działa we wszystkich popularnych przeglądarkach (FF/Chrome/Opera/IE/Safari) ;)