Czcionki Google w WordPress
(16161)
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.
#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.
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?
Wszystko fajnie, tylko nadal nie rozumiem instalacji czcionki we wtyczce Easy Google Fonts.
Pozdrawiam.
Ta nie jest bynajmniej łatwa w obsłudze. Sporo męczyłem się, zanim zmieniłem np. font tekstu głównego czy menu.
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.