Jak naprawić wyświetlanie polskich znaków na blogu?

Znowu to zrobiłam – majstrowałam przy fontach na blogu. A wiesz co to oznacza? Kłopoty! Duuuuże kłopoty.
I krzaczące się straszliwie polskie znaki na blogu.

Dobra, trochę przesadzam – koniec końców nikt nie ma większej obsesji na punkcie naszych blogów niż my sami, więc ten mały “bug” może nikogo jakoś szczególnie nie obejdzie. Ale prawda jest taka, że ilekroć coś zmieniamy – np. w fontach na blogu, powinniśmy potem sprawdzić wszystko jeszcze raz na różnych urządzeniach.

No ale wiadomo – teoria sobie, a praktyka sobie.

Co zrobić kiedy krzaczą się literki…?

W efekcie, po ostatnich modyfikacjach mój blog nabawił się lekkiej czkawki – ś, ć, ł i jeszcze parę innych znaczków zaczęło wyglądać inaczej niż pozostałe litery w zdaniu.

I co w tym złego? Raz że wygląda to mało profesjonalnie, a dwa, że jak już to zauważysz to się na tym fiksujesz.

Myślisz, że Ciebie ten problem nie dotyczy?

Zabawna sprawa z tymi czcionkami, ale czasem lubią się one “wykrzaczać” tylko na konkretnych urządzeniach – np. na laptopie mój blog wygląda ok (a w sumie nawet całkiem nieźle).

Ale wystarczy że wejdę na bloga na telefonie, a tam….

Właśnie! Groza!

Ale spokojnie, zaraz to rozwiążemy.

Jak poprawić fonty na blogu – krok po kroku

Cała sprawa jest znacznie prostsza niż mogłoby się wydawać – zobaczysz, damy radę to poprawić te niegrzeczne fonty w 5 minut.

Ważne:
– instrukcja dotyczy jedynie czcionek z repozytorium fontów google
– font musi mieć polskie znaki (to można sprawdzić w ramach personalizacji naszego fontu – patrz punkt 3)
– instrukcja jest przeznaczona dla stron/blogów postawionych na wordpressie

Przejdź do repozytorium fontów google: fonts.google.com
Znajdź w nim swój font za pomocą wyszukiwarki w prawym górnym rogu
(Jeśli nie ma tam twojego fontu może warto rozważyć zmianę fontów na blogu? Korzystanie z fontów googla ma wiele zalet – między innymi to, że są darmowe)Ważne:
– upewnij się, że font ma polskie znaki (czyli czy występuje w wersji latin extended – patrz punkt 3)
Kliknij plusik przy wybranym foncie, a potem w czarny pasek na dole.
Przechodzimy do personalizowania naszego fontu
– klikamy “customize”
– dodaj wersję “latin extended”
– zaznacz które grubości czcionki są Ci potrzebne (jakiej używasz na blogu)Ja np. używam na całym blogu fontu work sans. W nagłówkach stosuję semi-bold (600), a w tekście głównym “book” (300); do tego dochodzą jeszcze wyboldowania w tekście głównym – potrzebuję więc jeszcze regular (400)
Kliknij “embed” i skopiuj linijkę kodu która zaczyna się od <link href…>

Wracamy z powrotem na bloga
Wchodzimy w kokpit i klikamy “Wygląd”, a z rozwijanego menu wybieramy “Edytor”
Szukamy po prawej stronie szablonu o nazwie “nagłówek motywu (header.php)
Skopiowaną linijkę kodu umieszczamy przed znacznikiem zamykającym “</head>”
Klikamy ‘Zaktualizuj plik”

Gotowe!

Teraz możesz sprawdzić czy wszystko poprawnie wgrało się na bloga (jeśli nie widzisz poprawy spróbuj otworzyć stronę w przeglądarce w trybie incognito).

Czy czujesz się jak hakerka? Bo ja trochę tak 😉

A tymczasem, do zobaczenia na Insta