Witaj Gościu Zaloguj się lub zarejestruj się.
Zaloguj

@font-face - wszystko, co powinieneś wiedzieć i jeszcze więcej

@font-face - wszystko, co powinieneś wiedzieć i jeszcze więcej

Użycie niestandardowych czcionek na stronach internetowych jest dziś co raz bardziej powszechne. Dzieje się to za sprawą rozpowszechnienia wsparcia dyrektywy @font-face przez przeglądarki.

W Internecie jest wiele tutoriali, jednak w każdym brak wielu informacji dot. implementacji czcionek na stronach. Choć wydaje się to proste, to nie zawsze takie jest. Oto tutorial, który wyjaśni wszystkie Twoje wątpliwości.

Korzyści z użycia @font-face

Oczywiście dyrektywa @font-face pochodzi ze specyfikacji kaskadowych arkuszy styli 3 poziomu (CSS3) więc jest stosunkową nowością. Nie oznacza to, że jest to pierwsze rozwiązanie, które pozwala na osadzanie czcionek na stronach internetowych. Już od lat ludzie radzili sobie z tym problemem za pomocą rozwiązań typu flash (Cufon) lub tekstów za pomocą literek w obrazkach sytuowanych w odpowiednich miejscach. Prawda jest jedna - były one niewygodne w użyciu, psuły semantykę i czystość kodu a jednocześnie negatywnie wpływały na pozycjonowanie. Oto zalety, jakie oferuje @font-face (wraz z porównaniem do konkurencji).

Jak widać zalet jest wiele i choć niektóre pokrywają się z rozwiązaniami konkurencyjnymi, to nie dorównują one dyrektywie z CSS3. Właśnie dlatego uważam, że na dzień dzisiejszy używanie rozwiązań jak cufon czy obrazkowych mija się zupełnie z celem - szkoda naszych nerwów i czasu.


Licencje

Każda czcionka ma określoną licencję. Abyś mógł użyć daną czcionkę na swojej stronie internetowej musisz posiadać do tego odpowiednie pozwolenie, które widnieje w licencji. Oznacza to, że nie możesz sobie wybrać dowolnej czcionki, którą pobierzesz z sieci lub wyciągniesz z katalogu czcionek systemu operacyjnego, wstawisz do generatora i wstawić na stronę. Będzie to nielegalne użycie czcionki, co może skutkować problemami prawnymi od autora typografii.

Nie zawsze przy każdej czcionce jest plik licencyjny lub jeżeli już jest, może być niejasny - lepiej unikać tego typu czcionek dla własnego dobra. Oczywiście nikt nie będzie Cię szukał po Polsce, bo na swoim blogu umieściłeś nielegalną czcionkę. Chodzi tutaj o dwa inne czynniki - własne sumienie (jeżeli ktoś wykonał dobrą i rzetelną pracę, to dlaczego mielibyśmy kraść?) oraz legalność w przypadku rozrostu serwisu - wtedy tak czy inaczej trzeba będzie zakupić czcionkę i odpowiednią licencję lub ją zmienić - to kolejny problem. Tak więc w przypadku niepewności lepiej nie używać konkretnych typografii a jeżeli chcemy mieć 100% pewność co do możliwości użycia, to najlepiej będzie skorzystać z popularnych witryn oferujących takie rozwiązania - Google Fonts, FontSquirrel itp. - opisane poniżej.


Wsparcie przeglądarek

Jak już zaznaczałem przy zaletach, każda z technik implementacji czcionki na stronie internetowej niesie ze sobą pewne problemy ze wsparciem. Rozwiązania typu Flash (sIRF, Cufon) mają to do siebie, że nie działają na wszystkich urządzeniach mobilnych, natomiast rozwiązania obrazkowe działają wszędzie. Czemu więc nie polecam ich użycia? Ponieważ jest to niewygodne, nieskalowane (poza niektórymi rozwiązaniami) i koliduje z SEO naszej witryny. A jak jest w przypadku @font-face?

Internet Explorer (co bardzo dziwi) już od lat oferował możliwość implementacji czcionek za pomocą tej dyrektywy. Niestety tylko i wyłącznie za pomocą własnego formatu EOT. Ostatnią przeglądarką w dodaniu tej funkcjonalności był Firefox w wersji 3.5. Aktualnie wszystkie przeglądarki (poza Opera mini) wspierają tę dyrektywę, więc prawdę mówiąc, nie ma się czym martwić, ponieważ odsetek osób, które nie zobaczą naszych specjalnych czcionek na naszej witrynie jest niewielki. Tak będzie oczywiście przy odpowiednim stworzeniu i serwowaniu wszystkich możliwych formatów, o czym będzie nieco poniżej. Teraz zobaczmy jak wygląda @font-face w praktyce.


Implementacja @font-face

Podstawowa implementacja jest bardzo prosta. Nie wymaga zbyt wiele wiedzy a jednocześnie, jak w wielu sytuacjach, nie musisz jej znać na pamięć - wystarczy, że zachowasz ją gdzieś w swoich wycinkach kodu i będzie gotowa do użycia przy każdym kolejnym razie. Oto kod:



Ostrzeżenie Ostrzeżenie Należy zwrócić szczególną uwagę na adres docelowy czcionki. Jest on określany względem pozycji arkusza. W tym przypadku, plik czcionki znajduje się w tym samym katalogu, co plik CSS. Jeżeli czcionka się nie pojawia na Twojej witrynie, sprawdź dwukrotnie jej adres docelowy, gdyż to on może być tego powodem.

Powyższy kod odpowiada za implementację czcionki na stronie. Dzięki niemu mamy czcionkę, jednak nie pojawi się ona nigdzie na stronie. Jak dobrze pamiętasz, aby przyporządkować daną czcionkę do konkretnego elementu na stronie musimy użyć atrybutu font-family:

Pamiętaj, że nazwa czcionki wpisana w font-family musi być identyczna z tą, która widnieje w atrybucie o tej samej nazwie dyrektywy @font-face.

To jest podstawowa implementacja. Dlaczego podstawowa? Bo najprostsza z możliwych. Tę musimy rozbudować o kolejne formaty (o tym za chwilę) oraz mamy możliwość definiowania kilku różnych czcionek na jednej stornie internetowej.


Rozszerzenia (typy plików)

Jak przed chwilą wspomniałem, w celu możliwie największego wsparcia przeglądarek naszej niestandardowej czcionki, powinniśmy w dyrektywie @font-face dodać wszystkie formaty, jakie posiadamy. Oto formaty, które obsługują poszczególne przeglądarki:

Tak więc, najlepszym rozwiązaniem będzie zaserwowanie formatów .eot, .ttf /.otf, svg oraz woff. Oczywiście może się okazać, że za kilka lat będzie jeden format, który będzie obsługiwany przez wszystkie przeglądarki, jednak do tego czasu warto zadbać o to, by nasza witryna wyświetlała się jednakowo dla każdego odwiedzającego, niezależnie od jego przeglądarki.


Implementacja kompletna

Jeżeli już wiesz jakie formaty czcionek powinieneś umieścić w dyrektywie, przejdźmy do kodu, który takie zawiera:

Gdzie LoremIpsum i Lorem-ipsum to odpowiednio nazwa czcionki i nazwa pliku. Należy tutaj zwrócić szczególną uwagę na jedną rzecz - przedstawiona powyżej kolejność jest bardzo ważna. Jeżeli dalibyśmy czcionkę formatu eot do pozostałych, wtedy Interenet Explorer nie wyświetliłby czcionki na witrynie. Przedstawiony powyżej przykład to dokładny wzorzec. Dodatkowo, przy źródle "local" pojawia się minka z uśmiechem. Co to znaczy? Źródło local służy do tego, aby odnaleźć daną czcionkę w systemie operacyjnym. W takim przypadku przeglądarka szuka odpowiedniej czcionki w systemie i w przypadku jej znalezienia nie pobiera jej z serwera, dzięki czemu nasza strona jest szybciej ładowana. Osobiście jednak nie polecam Ci wstawianie tam niczego, co miało związek z czcionkami. Dlaczego? Doświadczenie wielu osób mówi, że może to spowodować problemy począwszy od braku polskich znaków w czcionce systemowej aż po implementację innej czcionki, która znajdowała się pod tą samą nazwą.


Źródła czcionek do pobrania

Jeżeli nie masz własnych czcionek lub martwisz się o ich licencjonowanie, oto kilka źródeł, które pozwoli Ci na implementację niestandardowych czcionek na swojej witrynie. Jakby tego było mało, wybór jest naprawdę ogromny, więc jest w czym przebierać.

oraz płatne rozwiązania:


Najczęstsze problemy

Niestety jak to z nową wiedzą pojawiają się nowe problemy i pytania. Oto kilka najczęstszych problemów, z którymi spotykają się początkujący.


Brak polskich znaków

Ten problem jest bardzo często spotykany, szczególnie w przypadku użycia czcionek ze źródeł, jakie podałem wcześniej. Objawia się to tym, że polskie znaki w danym tekście są prezentowane inną czcionką lub znakami znamiennymi (zmiast "ś" pojawia się "s", zamiast "ą", pojawia się "a" itd.). Problem leży w czcionce, która nie posiada polskich znaków. Dzieje się tak, ponieważ podane wyżej serwisy to amerykańskie lub angielskie strony, a jak wiemy, oni nie posiadają w alfabecie naszych "dziwnych znaczków". Mimo wszystko na tych stronach są czcionki podsyłane od wielu osób z całego świata, dlatego nie wszystkie zawierają polskie znaki. Aby przebierać tylko i wyłącznie w tych odpowiednich, na danych stronach należy zaznaczyć, aby czcionki miały zestaw znaków "European" lub "Latin extended". Jednocześnie, dla upewnienia się, że wszystkie potrzebne nam znaki są dostępne, warto przetestować czcionkę bezpośrednio na stronie (zazwyczaj zakładka test lub test-drive) i wpisać polskie znaki.


Brak czcionki w przeglądarce Firefox na subdomenach

Z powodu polityki bezpieczeństwa przed bezprawnym użyciem czcionek z innych adresów, w przeglądarce Firefox nie wyświetlają się czcionki na subdomenach. Ten problem był już przez nas poruszany w osobnym wpisie na blogu: @font-face na subdomenach w Firefoxie. Problem i rozwiązanie


Pochylenie i pogrubienie

Jeżeli po implementacji czcionki na stronie internetowej będziemy chcieli ją pochylić lub pogrubić, wystarczy, że dodamy atrybut CSS font-style: italic; lub font-weight: bold;. Niestety, nie w każdym przypadku przynosi to pożądane efekty. Dlaczego? Ponieważ wtedy przeglądarka wykonuje transformacje na czcionce, które prowadzą do osiągnięcia danego efektu. Jeżeli nie jest ona dla Ciebie zadowalający, pamięta, że implementować możesz wiele czcionek, co oznacza również, że wiele styli czcionek. Wystarczy, że zaimplementujesz czcionkę w rożnych postaciach i odpowiednio je nazwiesz. Gotowe.


Podsumowując

Użycie niestandardowych czcionek na stornach internetowych jest dziś łatwiejsze, niż kiedykolwiek. Za pomocą dyrektywy @font-face wprowadzonej w CSS3 jest to banalnie proste i możliwe do realizacji w zaledwie 2 minuty.

Taki prosty zabieg może zdecydowanie zwiększyć piękno naszej witryny bez wielkiego wysiłku. Myślę, że każda nowoczesna witryna powinna cechować się unikatowością, którą uzyskuje się przez tego typu zabiegi. A Ty, używasz na własnej stronie niestandardowych czcionek? Pochwal się swoimi doświadczeniami w komentarzach.

Inne wpisy, które mogą Cię zainteresować

Poniżej przedstawiamy Ci propozycje innych wpisów, które mogą Cię zainteresować. Sprawdź, czytaj i poszerzaj swoją wiedzę.


Czytaj
Pierwsza ocena/krytyka witryny już jest!

Pierwsza ocena/krytyka witryny już jest!

Czytaj
Myślałem, że... Czy błędne podejście do rozmów z Klientami

Myślałem, że... Czy błędne podejście do rozmów z Klientami

Czytaj
Inspirujące strony internetowe, wydanie nr 8

Inspirujące strony internetowe, wydanie nr 8

Czytaj
5 nawyków freelancera, których możesz nauczyć się od dzieci

5 nawyków freelancera, których możesz nauczyć się od dzieci

Komentarze do tego wpisu


comments powered by Disqus