czwartek, 14 lipca 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 jednama 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.
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.
Porada bardzo się przyda :)
OdpowiedzUsuń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ć :)
Nie zauważyłam na liście mąki arachidowej - gapa ze mnie :) Oczywiście mąkę arachidową też mogę :)
Usuń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ś
OdpowiedzUsuńOpowiastki Prawdziwe (klik)
Pewnie, że przydatna :)
UsuńCiekawy poradnik! Warto z niego skorzystac :)
OdpowiedzUsuńNOWY POST NA FABRYCE MIĘTY KLIK! :))
Post bardzo przydatny ;) Kiedyś chciałam zmienić czcionkę z tej strony, jednak nie znalazłam nic dla siebie ;)
OdpowiedzUsuńMój blog - Klik. Zapraszam! ;)
Jak zwykle świetne wskazówki dla wszystkich, którzy chcą poprawić wygląd swojego bloga, masz gotową poradę chyba na kazde zagadnienie:)
OdpowiedzUsuńOj na każde niestety nie :)
Usuńbardzo przydatny post przyda mi się!!
OdpowiedzUsuńObserwuje i zapraszam do mnie i do obserwacji jesli sie podoba!
http://kamila-mazur.blogspot.com/
Cieszę się, że Ci się przyda :)
UsuńPrzydatny post. Niestety wszystko co dotyczy wyglądu bloga-to nie moje. Za nic nie mogę tego ogarnąć, ale bardzo się staram! :)
OdpowiedzUsuńhttp://maliinowy-swiiat.blogpot.com
Jak się robi wszystko według instrukcji to nie powinnaś mieć problemu ;)
Usuń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
OdpowiedzUsuńhttp://nevermind-factory.blogspot.co.uk/
O jej, dziękuję za tak miłe słowa :)
UsuńStaram się jak mogę, aby wszystko było zrozumiałe :)
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ń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ńDlaczego nad head trzeba wpisać ten kod, a nie w head? Przydatny wpis 🙂
OdpowiedzUsuńNad masz wszystko co odpowiada za całość bloga w skrócie mówiąc
OdpowiedzUsuń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ńNie pogardzę zrzutem ekranu, tak to ciężko mi jest coś pomóc skoro nie widzę jaki komunikat się wyświetla
OdpowiedzUsuń