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

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

20 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ń
  11. Dlaczego nad head trzeba wpisać ten kod, a nie w head? Przydatny wpis 🙂

    OdpowiedzUsuń
  12. Nad masz wszystko co odpowiada za całość bloga w skrócie mówiąc

    OdpowiedzUsuń
  13. Gabriela Rusinkiewicz19 lipca 2017 17:11

    Nie wychodzi mi, chociaż wszystko robię jak jest napisane. Nie mogę dalej przejśc, bo zacinam się przy szablonie, nie wiem co zrobić z tym Wklejam ten adres z google font, ale ciagle mi pisze, że coś (chociaż nic innego nie dodawałam) mam poprawić, bo jest wprowadzone błędnie

    OdpowiedzUsuń
  14. Nie pogardzę zrzutem ekranu, tak to ciężko mi jest coś pomóc skoro nie widzę jaki komunikat się wyświetla

    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