Dosyć często zdarza się, że w pobranym z internetu szablonie do WordPress brakuje polskich znaków. Problem najczęściej objawia się w nagłówkach przez dziwnie wyróżniającymi się literkami z ogonkami, zupełnie jakby miały całkiem inny krój. W ekstremalnych przypadkach ogonki mogą w ogóle nie przypominać liter.

Co może mieć wpływ na ich brak, oraz jakie błędy są najczęściej popełniane przy wyborze czcionki, oraz jak ten problem rozwiązać we własnym zakresie. Sprawdź!

Brak polskich znaków

Obecnie, w wielu nowych motywach często wykorzystywane są czcionki z Google Fonts. Czcionki znajdujące się w tym katalogu są darmowe, również w komercyjnych projektach, jest ich sporo, a sama aplikacja umożliwiająca ich wyszukiwanie, filtrowanie bardzo przyspiesza znalezienie ciekawych styli, czy nowości. Dodatkowo, czcionki są umieszczone na bardzo szybkim serwerze i nie ma potrzeby ich pobierania – wystarczy odpowiednie podpięcie w dokumencie. To dlatego cieszą się taką popularnością i są chętnie wykorzystywane w wielu webowych projektach.

Problem z czcionkami, które korzystają z Google Fonts pojawia się, gdy ktoś chce na takim motywie zrobić 'polską’ stronę. Oczywiście nie ma w tym nic złego, ale należy wziąć pod uwagę, że język polski do najpopularniejszych nie należy. Faktem jest, że większość motywów tworzona jest w języku angielskim i pod ten język, aby trafić do szerszego grona odbiorców.

Serwisów udostępniających czcionki w sposób podobny do Google jest na pewno kilka, osobiście najczęściej spotykam się z Google Fonts, również sam chętnie korzystam, i dlatego skupiam się na nim w tym wpisie.

Brak polskich znaków w menu

Problem zaczyna się, gdy w niektórych sekcjach strony np. w nagłówkach, linkach menu, czy blokach kodu, pojawiają się dziwnie cienkie, albo dużo grubsze od reszty polskie znaki.

 

Brak polskich znaków 2Powyższy obrazek doskonale ilustruje to, co staram się wyjaśnić. Jest to menu, z pewnej strony, która już trochę w internecie „działa”. Dokładnie widać tutaj, że litera 'Ł’ w pierwszym linku 'STRONA GŁÓWNA’  jakby nie pasuje do reszty? Podobnie z 'Ć’ w opcji 'JAK DOJECHAĆ’.

Brak polskich znaków Drugi przykład, to zupełnie inna strona ale ponownie problem z literą 'Ł’. Widać, że każde wystąpienie tej litery psuje ogólny efekt i wygląda jakby było wycięte z innej bajki.

Może nie jest to do końca brak polskich znaków ale definitywnie coś tu nie gra. Wszystko wskazuje na problem z czcionką.

W czym tkwi problem i skąd wiadomo, że motyw korzysta z Google Fonts?

Problem tkwi w tym, że wybrana przez dewelopera motywu czcionka, nie została 'wyposażona’ w zestaw znaków z krojem dla polskich znaków. Ponieważ każdy taki zestaw znaków trochę 'waży’ toteż brak znaków dla wybranego języka jest częstą przypadłością. Na szczęście łatwo można ją rozpoznać i naprawić.

Jak naprawić brak polskich znaków w szablonie

Jeżeli zajrzymy do źródła strony z problemem, w sekcji head powinniśmy szukać czegoś co by wskazywało na pobieranie czcionki z Google Fonts no i na kod wczytujący czcionki. Najprościej jest szukać słowa 'google’, nie powinno być go dużo w kodzie, a z zaznaczonych linijek powinniśmy łatwo odgadnąć te, które nas interesują.

Aby wszystkie polskie znaki wyświetlały się prawidłowo, przy pobieraniu czcionki z Google Fonts należy ustawić opcję Latin Extended (latin-ext).  Niestety nie każda czcionka z Google Fonts będzie udostępniać tę opcję.

W pierwszym przypadku znalazły się dwie takie linijki:

<link rel='stylesheet' href='//fonts.googleapis.com/css?family=Oswald&#038;ver=3.7.1' type='text/css' media='all' />
<link rel='stylesheet' href='//fonts.googleapis.com/css?family=Droid+Sans&#038;ver=3.7.1' type='text/css' media='all' />

Natomiast w drugim

<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Oswald|Arimo|Open+Sans' type='text/css' media='all' />

W pierwszym przypadku mamy dwa zewnętrzne odwołania do platformy Google, wczytujące czcionki Oswald i Droid Sans, a w drugim jedno wczytujące 3 czcionki: Oswald, Arimo i Open Sans.

Naprawienie problemu, to przede wszystkim sprawdzenie, czy wybrane w motywie czcionki posiadają rozszerzenie Latin Extended i poprawne jego zdefiniowanie w odwołaniu wczytującym czcionkę. Aby, sprawdzić czy czcionka obsługuje Latin Extended najlepiej jest przejść do Google Fonts wpisać w wyszukiwarkę nazwę czcionki a następnie wybrać z listy potrzebny nam script.

Google Fonts
Google Fonts 2

Przykład na screenach: sprawdzam, czy czcionka Share Tech ma polskie znaki, niestety po zmianie scriptu na Latin Extended czcionka znikła z wyników wyszukiwania – szkoda. Jeszcze się upewniam wpisując losowy tekst w polu preview text… no niestety.

WordPress brak polskich znakówNaprawa jest bardzo prosta. Jeżeli wiemy już, że nasza czcionka może obsługiwać polskie znaki, wystarczy lekko zmodyfikować stary kod, albo wygenerować nowy i zamienić.

Tak wyglądałoby poprawne zdefiniowanie czcionki z rozszerzeniem Latin Extended dla czcionki Oswald:

<link href='http://fonts.googleapis.com/css?family=Oswald&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

Wystarczy po nazwie czcionki dopisać dodatkowy parametr &subset=latin,latin-ext. Niestety problemu z Droid Sans  nie da się naprawić w ten sposób, najprościej będzie wyszukać podobną czcionkę i ją zastąpić.

Pamiętaj, że jeżeli zmieniasz czcionkę, zmianę musisz także uwzględnić w pliku CSS.

Dla drugiego przypadku, tak powinien wyglądać drugi link:

<link href='http://fonts.googleapis.com/css?family=Oswald|Arimo|Open+Sans&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

W razie pytań zapraszam do sekcji komentarzy poniżej.

 

Wpis otagowano:

Komentarze do wpisu 12 komentarzy

Pomogłem? Dodaj coś od siebie! Skomentuj ten wpis:

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *