WordPress i Google Web Fonts

Google Web FontsGoogle Web Fonts to obszerny katalog zawierający ponad 600 darmowych fontów (w tym ponad 300 z polskimi znakami diakrytycznymi), które możemy wykorzystać na własnej stronie WWW. Nie musimy martwić się o format plików, o umieszczenie ich na własnym serwerze czy o zużywany przez nie transfer – wszystko to jest bowiem na głowie Google, a jedyne co musimy zrobić, to umieścić w naszym szablonie odpowiedni kod. Mimo że sposób korzystania z Google Web Fonts jest bardzo prosty, a instrukcje dostępne przy każdym z fontów jasne i klarowne, to zawsze można cały proces uprościć jeszcze bardziej. Do tego właśnie służy wtyczka WP Google Fonts.

Po aktywacji rozszerzenia musimy przejść do sekcji Ustawienia → Google Fonts, gdzie możemy wybrać fonty i przypisać je do odpowiednich elementów strony.

WP Google Fonts

Najpierw musimy wybrać jeden spośród dostępnych fontów. Niestety, wtyczka nie oferuje podglądu krojów, tak więc musimy skorzystać ze strony GWF. Lista jest aktualizowana automatycznie i zawsze zawiera aktualną listę dostępnych fontów.

Po wybraniu interesującego nas fonta pojawi się lista dostępnych dla niego opcji. Lista stylów została oznaczona numerkiem 1. Na pokazanym przykładzie mamy do wyboru Book 300 (normalny), Book 300 Italic (kursywa) i Bold 700 (pogrubiony). Osobiście polecam wybranie wszystkich, chyba że jesteśmy pewni, że nigdzie nie będziemy używać na przykład pogrubienia. Numerkiem 4 oznaczono listę dostępnych zestawów znaków – nas interesuje LatinLatin-ext (ten drugi zawiera między innymi polskie znaki diakrytyczne).

Na oznaczonej numerkiem 2 liście elementów możemy wybrać te, do których zostanie przypisany wybrany przez nas font. Na pierwszej pozycji znajduje się opcja All (body tags), która ustawia font dla całego dokumentu. Teoretycznie powinna ona zmienić krój na całej naszej stronie, ale tak się zwykle nie dzieje. Jeśli chcemy przypisać wybrany font do treści wpisów i stron, to powinniśmy wybrać opcje Paragraphs (p tags) (paragrafy) i Lists (li tags) (listy), ewentualnie dodatkowo Blockquotes (cytaty). Nagłówki (Headline) od h1 do h6 to zwykle wszelkiego rodzaju tytuły i nagłówki na stronie.

Oznaczone numerkiem 3 pole Custom CSS pozwala nam na dodanie własnego kodu CSS dla wybranego fonta. To, czy w ogóle musimy coś tam umieszczać, zależy w głównej mierze od używanego szablonu. Na przykład w motywie Twenty Twelve (aktualny domyślny szablon WordPressa) linki do poprzedniego i następnego wpisu nie są umieszczone w znacznikach p, przez co nie mają przypisanego naszego nowego fonta. Aby to zmienić wystarczy w polu Custom CSS umieścić następujący kod:

Wtyczka WP Google Fonts nie jest idealna. To, czego jej najbardziej brakuje, to wbudowany podgląd fontów. Na pewno jednak może być ona przydatna dla mniej zaawansowanych użytkowników, którzy nie potrafią bądź po prostu nie chcą grzebać w plikach szablonu.

Bezpośredni link

  • Podgląd fontów jest dostępny we wtyczce http://wordpress.org/extend/plugins/typecase/. Typecase jest bardziej rozbudowany i przyjemniejszy w obsłudze od WP Google Fonts. Osobiście używam tego typu wtyczek raczej do szybkiego podglądu strony. Udostępnianie adminom/blogerom 600 czcionek do wyboru jest estetycznie niebezpieczne :-P

    • Wtyczka Typecase wygląda bardzo efektownie, ale dla zwykłego użytkownika przypisanie fontów do poszczególnych elementów strony jest w jej przypadku po prostu zbyt trudne (trzeba ręcznie wprowadzać selektory).

      Co do zgubnych skutków zbyt dużego wyboru fontów – zgadzam się. ;)

  • GWF to po prostu bajka :) Według mnie powala Cufona, którego tak bardzo nie lubię.
    Tworząc strony www odbiegam od standardowych typu: Tahoma, Verdana, Century Gothic i stosuję Guglowskie – proste że są ładniejsze.

  • Hubert Jakubowski

    jestescie tacy genialni a nawet wasze komenty nie wyswietlaja polskich znakow, plugin nie dziala na roznych szablonach wp… albo jestem debilem :)
    ,

  • Karolina

    Zainstalowałam tę wtyczkę. Niezwykle ułatwia życie.
    Pojawił się jednak pewien kłopot…
    Na Google Chrome (na którym pracuję) oraz na Explorerze polskie znaki zaczęły się wyświetlać prawidłowo.
    Na Mozilli i na Operze są błędy!
    Mozilla wyświetla polski znak z innej bajki a na Operze w miejscu polskiego znaku jest puste miejsce.

    Dlaczego?

    • Czy w konfiguracji wtyczki wybrałaś zestawy znaków Latin i Latin-ext?

  • Nie ujmując temu wpisowi-tutaj opisałem równie ciekawą wtyczkę do Google Font:
    http://www.motywywordpress.pl/czcionki-google-w-wordpress/

  • Monika

    nie mogę sobie z tym poradzić- próbowałam różnych sposobów m.in. poprzez wklejenie kodu z google fonts do header.php teraz poprzez wtyczkę WP GOOGLE FONTS i za każdym razem ten sam problem: polskie znaki albo pogrubione albo „wychudzone” -już nie mam pomysłu co jest nie tak…;/ gdzieś przeczytałam żeby zmienić subset=latin na subset=latin-ext też nic nie dało…

    • Nie każdy font z Google Fonts obsługuje zestaw znaków latin-ext. Sprawdź na stronie fonta, którego chcesz użyć, czy obsługuje on ten zestaw.

      • Monika

        właśnie te które wybrałam obsługują np. Righteous a fatalnie to wygląda i jestem zmuszona wracać do znienawidzonego Ariala ;)

  • Dobry wpis!