Jak zainstalować nie standardowe fonty z Google Fonts i pobrać je na komputer

14 lipca 2016



Aktualizacja 14.07.2016
Pewnie niektórzy zauważyli, że Google Fonts zdobył nowy interfejs i teraz w trochę inny sposób będziemy instalować fonty. W tej aktualizacji pokażę Wam jak. Bonusowo na koniec, pokażę również, jak pobrać fonty z GF na swój komputer. 
Blogger oferuje 7 czcionek standardowych i internetowych (o ile dobrze naliczyłam) 86 w tym jedna
ma polskie znaki - Lobster. Nie raz ktoś chce mieć wyróżniającą się czcionkę w tytule wpisu - taką pisankę, ale nie zawiera ona polskich znaków, a bez tego wygląda to dość niechlujne. Niektóre czcionki szeryfowe czy bezszeryfowe również nie mają polskich znaków, a ładnie by się prezentowały na blogu (tak jak w moim przypadku Open Sans, który ładnie prezentuje się na stronie, ale bez polskich znaków wyglądało to tragicznie). Dlatego dzisiaj rozwiążemy nasz problem z brakiem polskich znaków i zainstalujemy nowe fonty z polskimi znakami na naszym blogu. Nie jest to takie trudne jakby się mogło wydawać - sama jak się za to zabierałam tak myślałam, a to jest dosłownie 2 minuty roboty.

1. Wchodzimy na stronę Google Fonts. Szukamy sobie fontu, który przykuł naszą uwagę i klikamy na jego nazwę (chcemy najpierw sprawdzić czy dany font ma polskie znaki). Znajdziemy się na stronie fontu i zjeżdżamy sobie niżej, aż pojawi nam się kategoria "Styles". Będzie tam rameczka "Type here to preview text", w którą wpisujemy "zażółć gęślą jaźń" - to zdanie zawiera wszystkie polskie znaki.




1a. Font bez polskich znaków. Po wpisaniu w okienko zdania "zażółć gęślą jaźń", font, który nie ma polskich znaków "zje" nam literki z ogonkami.

2. Przed instalacją musimy jednak wrócić na stronę główną i w bocznej kolumnie zaznaczyć "Latin Extended", aby nasze fonty po instalacji miały ogonki.



2a. Dobrą opcją w nowym interfejsie jest to, że możemy zainstalować 2,3 i więcej fontów na raz, ale najpierw pokażę to na jednym foncie. Na stronie głównej przy każdym foncie jest "+", przy wejściu w font mamy "select this font". Klikamy w to.



Jak widzicie po kliknięciu "+" lub "select this font", pojawi nam się taka rameczka na dole strony

Po rozwinięciu tej rameczki, pokaże nam się coś takiego:


W tej rameczce, mamy wszystkim znany kod, który musimy wkleić do szablonu.

2b. Dodawanie drugiego fontu. Aby dodać drugi font musimy wykonać wszystko z punktu 2. Wtedy na rameczce na dole zmieni nam się 1 na 2, 3, 4 - zależy ile tych fontów będziemy chcieli.


2c. Usunięcie fontu. Czasem się rozmyślamy i nie chcemy już instalować danego fontu, więc jak go usunąć z naszej rameczki? Każdy z fontów ma obok "-" - klikamy na niego i już wybranego fontu nie ma.


2d. Możemy przejść teraz do zakładki "customize" i w niej możemy wybrać opcje dla naszego fontu.


3. Instalacja fontu. Przechodzimy do szablon - edytuj kod HTML
3b. Klikamy kursorem w dowolne miejsce w kodzie i wybieramy Ctrl + f i wpisujemy <head> klikamy enter.
3c. Jak znaleźliśmy szukaną część kodu to NAD <head> wklejamy nasz skopiowany kod z pierwszego zdjęcia poniżej.

Musimy pamiętać, (już po wklejeniu kodu do szablonu) aby na końcu naszego kodu, za stylesheet" wstawić ukośnik /. Tak, jak na zdjęciu poniżej:


4. Zapisujemy szablon.

5. Teraz przechodzimy do projektanta szablonów - zaawansowane - dodaj arkusz CSS i wpisujemy kody na poszczególne elementy naszego bloga, wraz z nazwą czcionki.



Tytuł wpisu 

h3.post-title {font-family:  NAZWA CZCIONKI;}

Nagłówek z datą

.date-header span{font-family: NAZWA CZCIONKI;}

Nagłówki gadżetów

.sidebar .widget h2 {font-family: NAZWA CZCIONKI;}

Tekst wpisu i stopki wpisu

#Blog1 {font-family: NAZWA CZCIONKI;}

Tekst w kolumnie bocznej prawej

.column-right-inner {font-family: NAZWA CZCIONKI;}

Tekst w kolumnie bocznej lewej

.column-right-inner {font-family: NAZWA CZCIONKI;}

Pobieranie fontów na komputer


Wykonujemy wszystko z punktu 2a, a następnie klikamy strzałeczkę pobierania. Można pobrać więcej niż jeden font jednocześnie.

16 komentarzy:

  1. Porada bardzo się przyda :)
    Mamy pytanko :) Zaznaczyłaś fistaszki a mąki arachidowej nie. Które jest przypadkowym błędem? :)
    Niestety po przyjeździe do domu rodzinnego okazało się, że nasz piekarnik poszedł na urlop... nie zgraliśmy się więc może to trochę potrwać :)

    OdpowiedzUsuń
    Odpowiedzi
    1. Nie zauważyłam na liście mąki arachidowej - gapa ze mnie :) Oczywiście mąkę arachidową też mogę :)

      Usuń
  2. Przydatna sprawa, nigdy nie wiedziałam, jak to zrobić. Przyda się na chwilę, kiedy będę chciała coś pozmieniać w blogu ;) Świetnie ogólnie to wyjaśniłaś
    Opowiastki Prawdziwe (klik)

    OdpowiedzUsuń
  3. Ciekawy poradnik! Warto z niego skorzystac :)

    NOWY POST NA FABRYCE MIĘTY KLIK! :))

    OdpowiedzUsuń
  4. Post bardzo przydatny ;) Kiedyś chciałam zmienić czcionkę z tej strony, jednak nie znalazłam nic dla siebie ;)

    Mój blog - Klik. Zapraszam! ;)

    OdpowiedzUsuń
  5. Jak zwykle świetne wskazówki dla wszystkich, którzy chcą poprawić wygląd swojego bloga, masz gotową poradę chyba na kazde zagadnienie:)

    OdpowiedzUsuń
  6. bardzo przydatny post przyda mi się!!
    Obserwuje i zapraszam do mnie i do obserwacji jesli sie podoba!

    http://kamila-mazur.blogspot.com/

    OdpowiedzUsuń
    Odpowiedzi
    1. Cieszę się, że Ci się przyda :)

      Usuń
  7. Przydatny post. Niestety wszystko co dotyczy wyglądu bloga-to nie moje. Za nic nie mogę tego ogarnąć, ale bardzo się staram! :)

    http://maliinowy-swiiat.blogpot.com

    OdpowiedzUsuń
    Odpowiedzi
    1. Jak się robi wszystko według instrukcji to nie powinnaś mieć problemu ;)

      Usuń
  8. Gosiu, za każdym razem, jak u Ciebie jestem myślę sobie "Z nieba mi spadłaś kobieto!". Tak było i tym razem. Bo co może być lepszego od niesamowicie przydatnej instrukcji, napisanej Twoim prostym i przejrzystym językiem <3

    http://nevermind-factory.blogspot.co.uk/

    OdpowiedzUsuń
    Odpowiedzi
    1. O jej, dziękuję za tak miłe słowa :)
      Staram się jak mogę, aby wszystko było zrozumiałe :)

      Usuń
  9. a wiesz może jak zmienić czcionkę w samych etykietach? pokazują mi się w kilku miejscach, ale czcionka jest bez polskich znaków właśnie i wygląda to strasznie :/

    OdpowiedzUsuń
  10. Instalujemy czcionkę tak jest opisane powyżej, a potem korzystając z selektorów na etykiety - tutaj spis selektorów: http://blonparia.blogspot.com/2014/12/selektory-css.html - ustawiamy czcionkę czyli np. #Label1 {font-family: nazwa naszej czcionki:} czyli będzie to wyglądać mniej więcej tak #Label1 {font-family: Open Sans;}

    OdpowiedzUsuń

- Komentarze takie jak: spam, obserwacja za obserwacje, prośby o klikanie w banery etc. zostają usuwane - ZAPAMIĘTAJ! MÓJ BLOG TO NIE TABLICA OGŁOSZEŃ
- Uznaje tylko konstruktywną krytykę
- Każdy komentarz to motywacja dla mnie.
- Weryfikacja obrazkowa wyłączona