100% @font-face -  dowolna czcionka na stronieMagia @font-face opisana  przeze mnie wymaga małego sprostowania. Wszystko wynika z faktu, iż różne przeglądarki akceptują różne formaty czcionek, linkowanych za pomocą @font-face.

Firefox i Chrome doskonale radzą sobie z formatem .ttf, natomiast Internet Explorer teoretycznie wspiera .eot. Jak w takim razie zapewnić spójną typografię na naszej stronie? Komentarze warunkowe mogą rozwiązać problem. Z tym, że to nieeleganckie rozwiązanie i należy je stosować w ostateczności.

Chcecie gotowca? Oto i on w całej okazałości:


@font-face {
  font-family: 'KISS design';
  src: url('Kissdesign.eot');
  src: local('KISS design Regular'), local('KISS design'),
         url('Kissdesign.otf') format('opentype');
}

Odrobina komentarza. Po pierwsze potrzebujemy w takim razie czcionki w dwóch formatach - .eot i .otf/.ttf. Z pewnością przyda Ci się doskonały i darmowy konwerter formatów czcionek opisany przeze mnie.

Po drugie, jeżeli przeglądarka znajdzie czcionkę o nazwie „KISS design Regular” na dysku lokalnym, zostanie ona użyta. Niesie to niewielkie ryzyko, że użytkownik będzie miał na swoim komputerze zupełnie inną czcionkę, zapisaną pod użytą przez nas nazwą. Warto mieć to na uwadze. Jeżeli jednak użytkownik nie posiada lokalnie żądanej czcionki, przeglądarka pobierze ją z serwera – „Kissdesign.otf”.

Po co w takim razie linkowanie „Kissdesign.eot”? Dla ukochanego IE. Internet Explorer zignoruje drugie wystąpienie „src: (…)”, ponieważ nie rozumie znaczenia klauzul local i format.

Jeżeli chcesz zgłębić ten temat, polecam wpis Bulletproof @font-face na blogu Paula Irisha.