Czcionki Google w WordPress

15 maja 2014 | Odsłon:

(15637)

Czcionki na Twojej stronie odgrywają duża rolę, jeśli chodzi o czytelność i atrakcyjność witryny. Google udostępnia setki darmowych i oryginalnych czcionek internetowych, które możesz wykorzystać do dowolnych celów. Większość fontów wyświetla polskie znaki, ale dla pewności przy wyszukiwaniu czcionki wybierz styl Latin Extended.

Wszystkie czcionki Google dostępne są pod adresem: http://www.google.com/fonts/

#Instalacja ręczna

Wybierz swoją czcionkę Google i kliknij Quick Use. Wybrałem czcionkę Pacifico.

Na nowej stronie ujrzysz krótką instrukcję instalacji Pacifico.
Dodaj do header.php w sekcji <head> linijkę z pola nr 3:

<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>

Integracja czcionki z CSS

Użyjemy czcionki Pacifico do znacznika pre w naszym style.css. Otwórz plik WYGLĄD -> EDYTOR -> style.css lub przez FTP.

Odnajdź element pre i dodaj wpis z powyższego pola nr 4. U mnie po zmianie, kod wygląda tak:

pre {
    font-family: 'Pacifico', cursive; //czcionka Google
    font-size: 15px;
    -webkit-hyphens: none;
    -moz-hyphens:    none;
    -ms-hyphens:     none;
    hyphens:         none;
    line-height: 1.6;
}

Oto efekt:

#Instalacja za pomocą wtyczki

Drugi sposób instalacji wykonamy za pomocą ciekawej wtyczki Easy Google Fonts. Metoda ta jest szybsza i przyjemniejsza. Wystarczy kilka kliknięć, by mieć nowe i stylowe czcionki Google.

Wtyczka dostępna pod adresem: http://wordpress.org/plugins/easy-google-fonts/

Wideo poradnik obsługi wtyczki: http://vimeo.com/77878709

Podstawowa zmiana czcionek

Po instalacji wtyczki, możesz z niej od razu korzystać. Wejdź w WYGLĄD->PERSONALIZACJA. Zobaczysz nową opcję TYPOGRAPHY . Możesz już zmieniać rodzaj czcionki, kolor, wielkość. Zmiany ujrzysz po prawej stronie w czasie rzeczywistym. Gdy zechcesz wrócić do standardowych ustawień danego elementu(np. H1) kliknij RESET. Sprawi to, że konfiguracja H1 z powrotem będzie brana z style.css.

Możesz zarządzać akapitami oraz nagłówkami H1-H6.

Zaawansowana zmiana czcionek

Co jeśli zechcesz zmienić czcionkę np. znacznika <pre>? Wejdź w USTAWIENIA -> GOOGLE FONTS . W Control Name wpisz swoją dowolną nazwę, a w polu niżej wpisz, jaki element CSS chcesz edytować. W naszym przypadku wpiszmy pre.

Dzięki temu dodaliśmy nową opcję w WYGLĄD -> PERSONALIZACJA -> TYPOGRAPHY , czyli Moje ustawienia znacznika pre. Od teraz oprócz akapitów, nagłówków H1-H6 możesz edytować również pre.

Pamiętaj, żeby nie przesadzać z ekstrawagancją czcionek, bo efekt atrakcyjności strony może być odwrotny do zamierzonego.

Jaka jest Twoja ulubiona czcionka Google?

Udostępnij

Propozycje lektur dla osób, które chcą rozwijać swoje umiejętności tworzenia stron opartych na WordPress'ie:

WordPress. Ćwiczenia praktyczne	WordPress. Programowanie. Ćwiczenia praktyczne	WordPress. Tworzenie własnych motywów	WordPress od podszewki. Poznaj nJpopularniejszy system CMS
WordPress 3. Instalacja i zarządzanie	Tablice informatyczne. Wordpress	Jak stworzyć najlepszy blog. Wordpress 2.0

Fen pisze:

25 października 2014 o 23:42

Wszystko fajnie, tylko nadal nie rozumiem instalacji czcionki we wtyczce Easy Google Fonts.

Pozdrawiam.

Odpowiedz
Tomek pisze:

20 listopada 2015 o 18:18

Ta nie jest bynajmniej łatwa w obsłudze. Sporo męczyłem się, zanim zmieniłem np. font tekstu głównego czy menu.

Odpowiedz
Napraw pisze:

24 listopada 2015 o 20:16

dziękuje. wszedłem tutaj żeby się dowiedzieć o easy google fonts i się w sumie dowiedziałem. lepiej wytłumaczone niż na ich beznadziejnym wideo (w przeciwieństwie do tej wtyczki) super.

Odpowiedz