Jak dodać i ustawić czcionkę niestandardową w bloggerze? Instrukcja krok po kroku!

Jak dodać nową czcionkę (font) w bloggerze? W poprzednim wpisie obiecałam, że pokażę jak to zrobić więc dziś szybki tutorial! Dowiesz się jak niestandardowy font dodać do blogspota i jak go zastosować do wybranego elementu na blogu.

Font czy czcionka?

---

Poprawna forma to font, czyli "rodzaj pisma dla komputera lub drukarki". Czcionka z kolei, idąc za Słownikiem Języka Polskiego, to"prostopadłościan z odwróconą literą lub znakiem drukarskim, dającymi w druku odbitkę tej litery lub znaku". W skrócie - czcionka to przedmiot fizyczny, a font to plik komputerowy, zawierający informacje o poszczególnych literach i znakach danego kroju pisma.

Język się zmienia i ewoluuje. Wydaje mi się, że nikt nie ma wątpliwości co ktoś ma na myśli pisząc/mówiąc o "czcionce na bloga". Bardzo podoba mi się zdanie Adama Twardocha: Jeżeli na czcionkę elektroniczną będziemy mówić “font”, to słowo “czcionka” za jakiś czas zniknie z języka, podobnie jak znikło słowo “krotło” (oznaczające kiedyś to samo co czcionka). Dzisiaj uważam więc, że lepiej nadać słowu “czcionka” nowe znaczenie niż pozwolić temu głęboko słowiańskiemu słowu zaniknąć i de facto zastąpić je zapożyczeniem z angielskiego — “font”.

Ponieważ więc słowo "czcionka" w mowie potocznej zakorzeniła się tak mocno jako synonim słowa font, na potrzeby tego wpisu będę zamiennie używać obu sformułowań. Założę się, że sporo więcej osób trafi na ten post wpisując w wyszukiwarkę frazę "jak dodać niestandardową czcionkę na bloggera" niż "jak dodać niestandardowy font" ;) 

---

ZOBACZ TEŻ WERSJĘ WIDEO:

---

Jak dodać niestandardową czcionkę do bloggera? Instrukcja krok po kroku

---

 

1. Wybieramy font z Google Fonts

Pierwsze od czego musimy zacząć to wybranie fontu. W tym celu wchodzimy na fonts.google.com  i krok po kroku pokażę Ci jak wybrać i osadzić czcionkę na Twoim blogu.

Najważniejsza rzecz, od której warto zacząć przeglądanie to wybranie "Latin Extended" z rozwijanej zakładki "Language". Dzięki temu mamy pewność, że wybrany font będzie posiadał polskie znaki diakrytyczne, czyli ś, ć, ń itd. Uwierz mi, nic nie psuje efektu bardziej niż brak polskich znaków. Nawet najpiękniejsza czcionka będzie prezentowała się bardzo źle, gdy zamiast ź pojawi się jakiś niepasujący dziwoląg. To punkt obowiązkowy!

Teraz możemy wybierać konkretny font. By zawęzić wybór możemy (ale nie musimy) skorzystać z rozwijanej zakładki "Categories". Mamy tu do wyboru:

• Serif - fonty szeryfowe, zawierające znaki z różnego rodzaju poprzecznymi lub ukośnymi niewielkimi liniami, tzw. szeryfami. 
• Sans Serif - fonty pozbawione ozdobników w postaci szeryfów.
• Display - fonty dekoracyjne.
• Handwritten - fonty imitujące odręczne pismo.
• Monoscpace - fonty z jednakową szerokością wszystkich znaków. 

Co jeszcze ułatwi nam wybór? Możemy skorzystać z podglądu. 

W zaznaczonych poniżej miejscach można wpisać swój tekst i zobaczyć jak będzie się prezentował w wybranym foncie. Gdy skorzystamy z górnego okienka tekst zostanie zastosowany do wszystkich fontów. Możemy też edytować tekst w oknie wybranej czcionki - wtedy zostanie zmieniony tylko w tym miejscu.

Po najechaniu myszką na daną czcionkę możemy też sprawdzić też jakie warianty są do wyboru. Rozwijając zakładkę z nazwą "Regular" pojawią się na dodatkowe opcje np. Medium, Semi-Bold, Italic. Każdy font ma różne warianty więc warto to sprawdzić, gdy już któryś nam wpadnie w oko. Jeśli poszukujemy czcionki, która będzie oferowała np. pogrubienie i pochylenie to szukamy "Bold" ,"Semi-Bold","Italic" itd. Oczywiście, po wybraniu danego wariantu, w podglądzie zobaczymy jak prezentuje się nasz tekst w takim właśnie wydaniu.

Gdy już zdecydujesz, który font masz zamiar umieścić na swoim blogu, klikasz na biały plusik w czerwonym kółeczku, który znajduje się obok wybranej czcionki. Na potrzeby tego wpisu posłużymy się fontem "Comfortaa".

Od razu po wybraniu naszej czcionki, u doły strony, powinna wyskoczyć czarna zakładka z napisem "Family Selected". Wystarczy kliknąć w nią lewym klawiszem myszy, a pojawią się nam kolejne opcje do wyboru.

I tu znów ważne! Pierwsze co robimy, to wchodzimy w "Customize" i zaznaczamy "Latin Extended" - żeby czcionka dodała się nam z polskimi znakami.
Wyżej wybieramy warianty jakie potrzebujemy na blogu. Podkreślę tu słowo "potrzebujemy" - nie warto zaznaczać wszystkiego na zapas, bo to wydłuży czas ładowania się strony. Wybierz tu tylko te warianty, z których rzeczywiście chcesz korzystać.

2. Dodajemy niestandardową czcionkę na bloggera

Teraz przechodzimy do dodania niestandardowej czcionki na bloggera. Wcześniej wybraliśmy font z Google Fonts i konkretne warianty, które chcemy umieścić na blogu, a teraz dodamy go do bloggera. Przechodzimy do zakładki "Embed" i kopiujemy zaznaczony poniżej kod.

Kod pod "Specify in CSS" też nam się później przyda!

W tym miejscu przechodzimy do naszego bloga: Panel Bloga → Motyw → Edytuj kod HTML (w nowej wersji bloggera Panel Bloga → Motyw → Trzy kropeczki → Edytuj kod HTML).
Teraz kliknij lewym klawiszem myszki gdzieś na kodzie, naciśnij jednocześnie Ctrl+f, a w rogu powinno pojawić Ci się okienko wyszukiwania. Wpisz tam <head>. Wyszukane miejsce podświetli Ci się na żółto. Tuż POD wklej skopiowany wcześniej z Google Fonts kod, dodając na końcu przed zamknięciem kodu / (ukośnik).

Pamiętaj, by przed wprowadzaniem jakichkolwiek zmian w kodzie zrobić kopię zapasową motywu - dzięki temu, nawet jeśli coś pójdzie nie tak, jednym kliknięciem przywrócisz stan sprzed zmian.

Prawdopodobnie teraz widzisz czerwony komunikat brzmiący mniej więcej: "Błąd podczas analizowania pliku XML, wiersz 6, kolumna 70: The reference to entity "display" must end with the ';' delimiter.". Nie przejmuj się, zaraz sobie z tym poradzimy.

Musimy zastąpić znak & na &amp;  (jak na obrazku poniżej). Po tej zmianie kod powinien zapisać się bez problemu. Jeśli nie, sprawdź czy na pewno przez zamknięciem kodu dodany został ukośnik.

Pamiętaj, że w momencie wyświetlenia czerwonego komunikatu zmiany nie są zapisane.

3. Zmieniamy font poszczególnych elementów na blogu

Na razie dodaliśmy font do naszego bloga, a teraz musimy go jeszcze zastosować do wybranych elementów. Możemy skorzystać z dwóch sposobów.


Sposób nr 1.
Tym sposobem podmieniamy jedną czcionkę na drugą.
Wchodzimy w kod HTML: Panel Bloga → Motyw → Edytuj kod HTML (w nowej wersji bloggera Panel Bloga → Motyw → Trzy kropeczki → Edytuj kod HTML).
Jeśli Twój motyw ma możliwość wprowadzania zmian w projektancie motywów, to na początku kodu powinnaś znaleźć kod przypominający ten poniżej, czyli np. "Group description..." itd - tam najczęściej znajdziesz czcionki, które obecnie są zastosowane.
Jeśli w Twoim szablonie czcionki są ustawione na stałe będą rozsiane gdzieś w kodzie. Skorzystaj z opcji wyszukiwania, czyli Ctrl+f, dzięki czemu wyszukiwana fraza jest podświetlona i łatwo ją znaleźć (tak, czy tak polecam z tego skorzystać, bo jest po prostu szybciej).
Teraz zmieniamy nazwę jednej czcionki na drugą. W moim przypadku zamieniałam Roboto na Comfortaa . Gdy podmienisz nazwy fontów we wszystkich miejscach, zapisz zmiany. I gotowe!
 

Sposób nr 2.

Jest jeszcze drugi sposób. Dla osób, które boją się wprowadzać kolejne zmiany bezpośrednio w kodzie, lub które chcą zmienić wygląd konkretnych elementów na blogu.
Wchodzimy w Projektanta motywów: Panel Bloga → Motyw → Dostosuj → Zaawansowane → Dodaj arkusz CSS.
Tutaj wklejamy kod odpowiedzialny za nową czcionkę. Musimy użyć jednak odpowiedniego selektora, a  to już zależy od motywu, którego obecnie używasz na blogu. Nie sposób wymienić wszystkich możliwości więc podaję tutaj jedynie zasadę działania.

W tym przypadku powiedzmy, że chcemy zmienić font nagłówków w poście.
Koniecznie przeczytaj wpis "Jak zmienić wygląd nagłówków i podtytułów w bloggerze", w którym opisuję jak możesz modyfikować te elementy. Jedną z możliwości jest właśnie zmiana czcionki.

W poprzednim wpisie pokazałam jak zmienić font, ale na jeden z tych, które już mamy w bloggerze. Teraz wykorzystamy dodaną przez nas czcionkę niestandardową. W tym celu wpisujemy kod:

.post-body h2 {font-family: 'Comfortaa'}

i zapisujemy zmiany.

Jeśli kod nie załapie możemy na końcu dodać !important, czyli cały kod wyglądałby tak:

.post-body h2 {font-family: 'Comfortaa'!important}

Gotowe!

Element {font-family: 'Comfortaa'!important} odpowiada za czcionkę.
Skąd wzięłam tę nazwę? Wróć do punktu 2. - W zakładce "Specify in CSS" mamy przykład zastosowania tej czcionki. Oczywiście w tym miejscu wklejasz nazwę wybranego przez Ciebie fontu.

.post-body h2 - to selektor odpowiadający za nagłówek (zobacz więcej w poście o zmianie wyglądu nagłówków i podtytułów)

PRZYKŁADOWE SELEKTORY, KTÓRYCH MOŻESZ UŻYĆ (w zależności od motywu):

• .sidebar h2 - nagłówki paska bocznego
• h1.post-title , h2.post-title lub h3.post-title - nagłówki postów  
• body - tekst strony
• #Header h1.title - nagłówek bloga
• .PageList li a - czcionka w gadżecie "Strony"

Mam nadzieję, że ta instrukcja jest dla Was czytelna, logiczna i łatwa do wprowadzenia. Nie jest możliwe opisanie tu wszystkich selektorów (każdy motyw jest inny), dlatego jeśli masz problem z ustawieniem fonta dla konkretnego elementu, zapraszam na moją grupę na FB. Tam utworzyłam specjalny post pod którym śmiało możesz zadawać pytania odnośnie tego konkretnego zagadnienia :) A niedługo pojawi się wersja video tego tutorialu -w międzyczasie zapraszam do subskrybowania mojego kanału na Youtube.