Czcionki Google w WordPress

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.quick_use

Na nowej stronie ujrzysz krótką instrukcję instalacji Pacifico.
czcionka pacificoDodaj 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:
czcionka google w pre

#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 czcionekpanel boczny

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.

czcionki google wtyczkaDzię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.

edycja znacznika pre za pomoca wtyczki

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?

Może Ci się również spodoba

4 komentarze

  1. Fen pisze:

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

    Pozdrawiam.

  2. Tomek pisze:

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

  3. Napraw pisze:

    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.

  4. Ukraina jest jednym z najpopularniejszych obszarów do tworzenia szablonów stron. Dzięki tej stronie będziesz mógł zebrać najlepszy admin panel template ukraińskich programistów, stworzony na podstawie szablonu, który można łatwo edytować i dostosować.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *