Indywidualne czcionki w sklepie – część I

Jak pewnie część z was wie, fonty (czcionki) stosowane na stronach www (czy też w sklepach internetowych) najczęściej sprowadzają się do krótkiej listy tzw. bezpiecznych fontów. Bardzo często spotykam się z irytacją klientów którzy oczekują, że z czcionkami w internecie jest tak jak z czcionkami na komputerze. Czasami długo muszę tłumaczyć, że niestety jak stworzymy sobie opis produktu np w programie Microsoft Word i wybierzemy „fikuśną” czcionkę to po wgraniu opisu do sklepu klienci zobaczą go tak jak byśmy chcieli.

Wszystko sprowadza się do jednego głównego problemu. Przeglądarki internetowe wyświetlając teksty w sklepach internetowych w standardzie korzystają z czcionek, które mamy już zainstalowane na urządzeniu na którym przeglądamy dany sklep.

Takie podejście, do niedawna praktycznie całkowicie blokowało możliwość korzystania z bardziej wyszukanych czcionek w obawie przed późniejszymi błędami.

Na szczęście od paru lat zauważyć można coraz silniejszy rozwój technologi umożliwiających ominąć ten problem i wymusić na przeglądarce by korzystała nie z czcionek zainstalowanych na danym urządzeniu tylko z tych, które projektant sklepu dostarczy wraz z innymi elementami strony.

Dzisiejszy wpis chciałbym poświęcić chwilę by omówić @font-face oraz Google web fonts.

Co to jest @font-face?

Jest to technika zagnieżdżania fontów na stronach www, czyli technika pozwalająca na zastosowanie fontów zdefiniowanych przez autora strony bez ograniczania się do czcionek zainstalowanych na danym sprzęcie wyświetlającym naszą stronę (komputerach, komórkach itp.).

Aby zagnieżdżenie działało poprawnie musimy wgrać plik danej czcionki w odpowiednim formacie (a dokładnie w kilku formatach gdyż różne przeglądarki obsługują różne formaty plików czcionek) na serwer a następnie stosując odpowiednie zapisy kodowe pobrać te czcionki na naszej stronie.

Aby zastosować daną czcionkę musimy jeszcze dodać odpowiednią regułę w arkuszu stylów CSS, która wygląda tak:

@font-face {
font-family: 'NazwaCzcionki';
src: url('katalogWktorymJestPlik/NazwaCzcionki.eot');
src: url('katalogWktorymJestPlik/NazwaCzcionki.eot?#iefix') format('embedded-opentype'),
url('katalogWktorymJestPlik/NazwaCzcionki.woff') format('woff'),
url('katalogWktorymJestPlik/NazwaCzcionki.ttf') format('truetype'),
url('katalogWktorymJestPlik/NazwaCzcionki.svg#NazwaCzcionki') format('svg');
}

Jak widzicie w kodzie dodanych jest kilka plików tej samej czcionki ale z różnym rozszerzeniem. Takie rozwiązanie wymuszone jest przez brak porozumienia producentów przeglądarek co do formatu czcionek.

 

Gdzie szukać takich czcionek?

W sieci jest bardzo dużo stron na których możecie znaleźć „web fonty”, są nawet takie, które pozwalają pobrać całe zestawy czcionek (czyli wszystkie potrzebne formaty) lub wygenerować taki zestaw na podstawie czcionki którą macie na komputerze (np www.fontsquirrel.com).

 

Pamiętajcie jednak o dwóch ważnych sprawach:

• zawsze sprawdzajcie licencję danej czcionki gdyż nie każda pozwala generować web fonty (czasem wymagana jest opłata licencyjna),
• zawsze sprawdzajcie czy dana czcionka ma polskie znaki by później nie było problemu z pustymi polami w miejscu gdzie powinno pojawić się nasze żłóąźćńę 🙂

 

Google Web Fonts – to pewnego rodzaju usługa oparta o technikę @font-face tylko uproszczone do granic możliwości.

Na potrzeby tego wpisu przygotowałem przykład zastosowania czcionek udostępnianych przez wielkiego brata Googla 🙂 w sklepach pracujących na oprogramowaniu Shoper 5.

Google Web Fonts udostępnia czcionki specjalnie przygotowane do użycia na potrzeby internetu, nie ma ich jeszcze zbyt wielu (szczególnie z naszymi końcówkami) ale są za free i nie ma problemów z licencjami to też proponuje zacząć właśnie od nich.

 

Krok 1

wejdź na stronę http://www.google.com/webfonts/ i wyszukaj interesującą cię czcionkę (najlepiej włączyć filtr Latin Extended by pokazać tylko fonty z polskimi znakami),

Krok 2

jak znajdziecie interesującą was czcionkę kliknijcie na link „Quick-use”, otworzy się nowe okno gdzie będziecie mogli wybrać styl czcionki (jej grubość) oraz zestaw znaków (tu zaznaczcie „Latin Extended (latin-ext)”)

Krok 3

Następnie z sekcji „Add this code to your website:” zaznaczie cały kod importujący wybraną czcionkę do naszego sklepu i wklej go w panelu administracyjnym sklepu w dziale Konfiguracja/Integracje/Integracje własne w sekcji HEAD

Krok 4

Teraz wystarczy dodać kod CSS który ustali rodzaj czcionki dla wybranego elementu sklepu. Np chcąc zmienić czcionkę wszystkich nazw modułów dodajmy:

.main .box .boxhead h3, .main .box .boxhead h1 {
font-family: 'nazwa naszej czcionki';
}

 

Przykład użycia jak zwykle na sklep.szablonsklep.pl