Dostaję od Was mnóstwo sygnałów, że blogowe poniedziałki dają Wam motywację i narzędzia do zmian na Waszych blogach. Czujecie się na nich lepiej, chce się Wam blogować. Wiem też, że prowadzanie zmian może uzależnić:) Dzisiaj przygotowałam instrukcję dodawania nowych czcionek do bloga na bloggerze. Teoretycznie w opcjach dostosowania szablonu mamy ich sporo do wyboru, jednak ten kto próbował poszukać czegoś interesującego szybko odkrył, że wiele z nich nie posiada polskich znaków, a część z tych, która te znaki ma nie jest poprawnie obsługiwana przez niektóre przeglądarki. Dzisiaj nauczycie się wgrywać nowe czcionki i definiować rodzaj czcionki dla poszczególnych elementów na blogu.

Wybór czcionki

W pierwszej kolejności udajemy się na stronę Google Fonts i wybieramy interesującą nas czcionkę. Aby mieść pewność, że nasza wybranka ma polskie znaki, w polu Preview Text wpisujemy je wszystkie. Oprócz tego możemy dopisać fragment próbnego tekstu, aby widzieć jak czcionka się prezentuje.
Jeśli decyzja zapadła to po prawej stronie, obok wybranej czcionki, klikamy w małą strzałeczkę.
Wyświetli się strona z dwoma liniami kodu. które będą  nam za chwilę potrzebne. Trochę zmodyfikowany kod z pierwszej linii posłuży nam do dodania nowej czcionki do bloga, a drugi pomoże wskazać, że dane element na stronie ma być wyświetlany za jej pomocą.

Dodanie nowej czcionki do bloga

Logujemy się do bloggera i robimy kopię zapasową szablonu. Następnie SZABLON>EDYTUJ KOD HTML. Klikamy na dowolny fragment kodu i wciskamy CTRL i F jednocześnie. W okienku wyszukiwania wpisujemy:

 </head>

Wciskamy enter. Powyżej </head> wklejamy kod z pierwszej linii. Musimy go zmodyfikować dodając za nazwą czcionki 

&amp;subset=latin,latin-ext

oraz

/

przed zamknięciem nawiasu.

W moim przykładzie będzie to wyglądało następująco:

<link href=’http://fonts.googleapis.com/css?family=Open+Sans&amp;subset=latin,latin-ext’ rel=’stylesheet’ type=’text/css ’ />

Zmiana czcionki elementów na blogu

W celu zmiany czcionki w poszczególnych elementach wyszukujemy kody (wymienię je za chwilę) i podmieniamy na kod z linii nr 2, czyli w moim przykładzie na font-family: 'Open Sans’, sans-serif; Tego typu zmiana sprawi, że nie będziemy mogły już zmieniać tej czcionki za pomocą narzędzia dostosowywania szablonu.
Kody, które trzeba podmienić, aby zmienić poszczególne elementy bloga:
NAGŁÓWEK BLOGA (opcja dla tych, którzy nie mają banera blogowego)

font: $(header.font);


TYTUŁ POSTA

font: $(post.title.font);      
TREŚĆ POSTA

font: $(post.body.font);


BODY BLOGA (np. tekst gadżetów) – jeśli w trybie edycji posta zmiEniasz czcionkę na inna niż domyślna to zmiana nie będzie widoczna.
font: $(body.font);

TYTUŁY GADŻETÓW I DATA
font: $(widget.title.font);

Po zmianie czcionki w ten sposób może być konieczność zmiany również jej rozmiaru. Wówczas pod kodem, który podmieniłyśmy możemy je dodać:

font-size: 14px;

Ilością px regulujemy wielkość czcionki.