Premium, Treści

Jak zmienić czcionkę na swojej stronie?

  • Poziom trudności:

Pomogłem rozwiązać Twój problem? Wspieraj moje działania bym pisał więcej:

10 PLN

Niektóre z szablonów (szczególnie tych płatnych) oferują zmianę czcionki tekstu i nagłówków. W tej sytuacji zmiana jest bardzo prosta, bo wystarczy poszukać opcji szablonu (najczęściej są w sekcji Wygląd albo Ustawienia) i metodą prób i błędów wybrać krój pisma, który Ci najbardziej odpowiada. Gorzej jeśli posiadamy szablon, który nie daje takiej możliwości albo budujemy stronę od zera.

Do niedawna jedynymi bezpiecznymi czcionkami z których korzystano na stronach www były:

  • Arial
  • Tahoma
  • Times New Roman
  • Verdana

Obecnie metod umieszczania fontów na stronie jest naprawdę dużo, od generowania do formatu Flash albo PDF, przez Cufon i Typeface.js na katalogu fontów Google kończąc. O tym ostatnim sposobie chciałbym napisać więcej gdyż jest on najbardziej przyjaznym wyjściem dla użytkowników i implementacja nowej czcionki nie zajmuje dużo czasu.

Pierwsza rzecz jaką powinieneś zrobić to wejść na Google Fonts. Z lewej strony masz parametry po których możesz sortować i wyszukiwać czcionki. Gdy już znajdziesz tą jedyną upewnij się czy zawiera polskie znaki. Najwygodniej to sprawdzić wpisując w polu „Preview Text” na górze znane wszystkim hasło: „Zażółć gęślą jaźń”. Czemu akurat to? To proste. To nic nie znaczące zdanie zawiera wszystkie znaki z polskimi ogonkami: żółćęśążń. Kiedy już upewnisz się co do języka Twojej czcionki kliknij na przycisk Quick-use:

open-sans

Już tylko cztery kroki dzielą Cię od zmiany czcionki na Twojej stronie internetowej.

Krok 1

Zaznacz kroje pisma jakich chcesz używać na stronie. Pamiętaj że im mniej wybierzesz tym szybciej będzie się ładować Twoja witryna. Wybieraj tylko te kroje, z których zamierzasz korzystać. Nigdy nie bierz kroju na zapas. Jeśli będziesz potrzebował czegoś więcej to w 2 min. możesz sobie kod na nowo wygenerować.

1-krok-kroj-pisma

Krok 2

Wybierz alfabet, który Cię interesuje. Pamiętaj aby oprócz alfabetu łacińskiego (Latin) wybrać także łaciński rozszerzony (Latin Extended) aby pojawiały się na Twojej stronie polskie znaki.

2-krok-alfabet

Krok 3

Skopiuj standardowy fragment kodu w ramach <head> Twojej strony. Aby edytować head wejdź do części Wygląd -> Edytor i poszukaj Nagłówka czyli pliku header.php. Najlepiej jeśli wkleisz ścieżkę w miejsce gdzie znajdziesz inne elementy <link>, o ile takie znajdziesz.

Przykładowy kod do wklejenia zawierający odwołanie do czcionki Open Sans oraz rozszerzenie alfabetu o zaawansowane znaki łacińskie (latin-ext):

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

Krok 4

Najtrudniejsze zadanie przed nami.  Teraz musisz znaleźć fragment kodu CSS odpowiadający za wygląd elementu, który chcesz edytować. Najsprawniej możesz to zrobić klikając na element prawym przyciskiem myszy i wybierając „Zbadaj element”. Po chwili dowiesz się jaki element na stronie trzyma informację o czcionce wykorzystywanej w tekstach i nagłówkach. Najczęściej paragrafy z treścią znajdują się pod nazwami .post-content p albo .entry-content p i takiego właśnie elementu powinieneś poszukać w kodzie CSS (w sekcji Wygląd -> Edytor). Jeśli go nie ma, wtedy skopiuj fragment kodu z 4 kroku ze strony Google Fonts i wklej go do CSS-a w następującej formie:

.post-content p, .entry-content p  {
   font-family: 'Open Sans', sans-serif!important;
}

Jeśli chcesz zmienić nagłówki wtedy najprawdopodobniej będziesz szukał elementów h1, h2 itd. aż do h6. Jeśli ich nie znajdziesz, możesz spróbować wkleić następujący kod:

h1, h2, h3, h4, h5, h6 {
   font-family: 'Open Sans', sans-serif!important;
}

Naturalnie jeśli korzystasz z innej czcionki to informację o niej oprócz wklejenia <link> z kroku trzeciego powinny się znaleźć także w kodzie wklejanym do style.css.

Po zmianie Twojej czcionki upewnij się że zawiera polskie znaki we wszystkich najpopularniejszych przeglądarkach. Powodzenia we wprowadzaniu zmian na Twojej stronie.

UDOSTĘPNIJ

Pomogłem rozwiązać Twój problem? Wspieraj moje działania bym pisał więcej:

10 PLN
Tagi: