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.

[FMP]

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.

[/FMP]

UDOSTĘPNIJ

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

10 PLN
Tagi: