Loading...

Blog

Problem z wyświetlaniem polskich znaków dla Google Fonts w Joomla Problem z wyświetlaniem polskich znaków dla Google Fonts w Joomla
05 Maj

Problem z wyświetlaniem polskich znaków dla Google Fonts w Joomla

Przez 
(2 głosów)

Kolejne aktualizacje bazy czcionek udostępnionych przez Google sprawiły, iż na niejednej stronie internetowej pobierane z zewnątrz czcionki nie wyświetlają się prawidłowo. Niniejszy post pokaże Ci, jak ten problem można w łatwy sposób naprawić.

Po jednej z aktualizacji wykonanej przez Google miała miejsce zmiana, która owocowała tym, że dotychczas prawidłowo wyświetlające się czcionki przestały obsługiwać polskie znaki diaktrytyczne, zastępując w miejscu ich występowania czcionkę zdefiniowaną dla danego elementu czcionką systemową (Arial, Verdana, itp.). Powodowało to, iż do tej pory dobrze wyglądające na przykład tytułu artykułów zaczęły wyglądać koszmarnie - co można zobaczyć na przykładzie poniżej.

Po szybkiej analizie problemu okazało się, że rozwiązanie jest prostsze niż można by się spodziewać. Mianowicie, najpierw za pomocą Firebuga w Mozilli (lub czegoś innego) badamy element, w którym interesująca nas czcionka występuje. W przypadku mojej strony chodziło o dwie czcionki - Roboto Slab oraz Open Sans. 

Pierwszą rzeczą, którą należy zrobić, jest zlokalizowanie deklaracji wczytywania tych czcionek. Najczęściej odpowiadające za to linijki kodu znajdziecie w pliku index.php swojego szablonu (katalog templates/nazwa_waszego_szablonu) lub w którymś z plików akruszy styli (znajdziecie je w katalogu templates/nazwa_waszego_szablonu/css). W moim przypadku deklaracje te znalazłem w pliku template.css i znajdowały się one na samym początku tego pliku.

@import 'https://fonts.googleapis.com/css?family=Open+Sans:400,300)';
@import url(http://fonts.googleapis.com/css?family=Roboto+Slab);

Na wszelki wypadek radzę sprawdzić, czy użyte na Waszej stronie czcionki w dalszym ciągu obsługują język polski. Aby to zrobić należy wejść na stronę Google Fonts i w okienku po lewej wpisać nazwę używanej czcionki. Po jej wyświetleniu naciskamy przycisk wskazany strzałką na poniższym obrazku.

Zostajemy przeniesieni do kolejnego okna, w którego górnej części należy wybrać interesujące nas wersje czcionki. Istotny przy tym jest fakt, że im więcej rodzajów czcionki wybieramy, tym wolniej się strona wczytuje - tak więc wybierajcie te najbardziej potrzebne.

W następnym punkcie nastąpił przełom i zrozumiałem o co chodzi. Aby wczytywały się polskie znaki musisz zaznaczyć pole wskazane strzałką, tak jak widać to poniżej.

Rezultatem jest wygenerowanie linku, który należy wklejać w pliku, w którym macie zdefiniowane wczytywanie czcionek. Ewentualnie do istniejącego linku wystarczy dokleić definicję polskich czcionek, czyli &subset=latin,latin-ext tak, żeby linki wyglądały w następujący sposób.

@import 'https://fonts.googleapis.com/css?family=Open+Sans:400,300&subset=latin,latin-ext)';
@import url(http://fonts.googleapis.com/css?family=Roboto+Slab&subset=latin,latin-ext);

Po zapisaniu pliku i odświeżeniu strony wszystko wygląda już tak, jak wyglądało przedtem i wyglądać powinno.

Oto dowód.

Czytany 4733 razy Ostatnio zmieniany wtorek, 26 czerwiec 2018 12:55
Morphic

Webmaster, programista i core programmer z wieloletnim doświadczeniem. Z Joomla! związany od czasów Mambo.

Strona: www.morphic.pl