Odpowiednia czcionka jest kluczowym elementem na stronie internetowej. Źle dobrana może znacząco popsuć wygląd i przede wszystkim czytelność na stronie. Jednak co zrobić w sytuacji, gdy masz już upatrzony odpowiedni krój czcionki, jednak Twój motyw jej nie obsługuje? Na szczęście jest bardzo proste rozwiązanie tego problemu. W artykule pokażę jak dodać własną czcionkę do WordPressa z wtyczką i bez.

Jak dodać własną czcionkę do WordPressa przy użyciu wtyczki

Sposób ten polecam osobom, które nie lubią „grzebać” w kodzie strony 😉 Jest dostępnych kilka gotowych pluginów. Ja jednak polecam Fonts Plugin | Google Fonts Typography.

Po zainstalowaniu i aktywacji wtyczki przejdź do jej ustawień: Fonts Plugin -> Customize Fonts. Poniżej omawiam najważniejsze opcje zawarte w darmowej wersji wtyczki.

Następnie wybierz pierwszą pozycję Basic Settings, czyli ustawienia podstawowe.

W tym miejscu ustawisz wybrany krój czcionki dla całej strony, nagłówków oraz przycisków i pól typu input:

• Base Typography – w tym miejscu ustawisz krój czcionki dla całej strony.
• Headings Typography – możesz ustawić inny krój dla nagłówków.
• Buttons and Inputs Typography – tu zmienisz krój czcionki dla przycisków i pól typu input.

W kolejnej sekcji Advanced Settings znajdują się bardziej szczegółowe opcje.

• Branding – czcionka dla tytułu i opisu strony.
• Navigation – czcionka dla menu.
• Content – w tym miejscu ustawisz inny krój czcionki dla akapitów, a także poszczególnych nagłówków H1, H2, H3, H4, H5 oraz H6.
• Sidebar – w tym miejscu ustawisz inny krój czcionki dla treści, a także nagłówków w kolumnie bocznej.
• Footer – w tym miejscu ustawisz inny krój czcionki dla treści, a także nagłówków w stopce.

Sposób bez wtyczki

Drugi sposób jest dla osób, które nie boją się ingerować w kod strony 😉

W pierwszej kolejności należy wybrać czcionkę z biblioteki Google Fonts.

• 1 Categories – z listy rozwijalnej możesz wybrać jedną pięciu kategorii czcionek – czcionki szeryfowe (Serif) i bezszeryfowe (Sans Serif), dekoracyjne (Display), pismo odręczne (Handwriting), oraz czcionka z rodziny monospace.
• 2 Language – z listy rozwijalnej wybierz odpowiedni język. Jeśli chcesz mieć polskie ogonki, to wybierz Latin Extended.
• 3 Font properties – tu możesz wybrać dodatkowe opcje wyświetlanych czcionek, m.in. grubość i szerokość fontów.

Następnie wybierz interesujący Cię krój czcionki, a także odpowiedni styl.

Po wybraniu stylów dla czcionki, po prawej stronie pojawi się link:

W powyższym przykładzie interesuje nas link:

https://fonts.googleapis.com/css2?family=Roboto&display=swap

W kolejnym kroku należy dodać poniższy fragment kodu do pliku functions.php. Oczywiście w miejscu, gdzie znajduje się przykładowy link, wstaw swój własny.

UWAGA! Wszelkie zmiany w kodzie należy dokonywać w motywie potomnym. W przeciwnym razie wszelkie zmiany zostaną nadpisane po wykonaniu aktualizacji zainstalowanego motywu.

function fanka_kodowania_add_google_fonts() {
    wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', false );
}
add_action( 'wp_enqueue_scripts', 'fanka_kodowania_add_google_fonts' );

Od teraz możesz już używać wybranej czcionki. Przeczytaj także artykuł Polskie znaki w Google Fonts.