Niestandardowe czcionki z polskimi znakami w bloggerze

Dzień dobry!

Dzisiejsza instrukcja nie należy zdecydowanie do grona tych, które możnaby określić mianem trudnych, ale zdecydowanie może zmienić wygląd naszego bloga. A tyczyć będzie się ona... czcionek! A precyzyjniej - czcionek niestandardowych, których nie znajdziemy w panelu bloggera. Pokażę Wam dzisiaj, jak szybko znaleźć czcionkę dla naszego bloga i jak dodać do niej polskie znaki.

To co, zaczynamy?

NIESTANDARDOWE CZCIONKI Z POLSKIMI ZNAKAMI

Wchodzimy na stronę google.com/fonts. Musimy pamiętać, że nie każda zamieszczona tam czcionka posiada polskie znaki. Jak przekonać się, która je ma? W okienku Preview Text dopisujemy przed podaną sentencją ciąg polskich znaków, które nas interesują [ąćęłńóśźż] lub zamieniamy ją na najkrótsze w polskim języku znane zdanie, które zawiera wszystkie te litesy - "zażółć gęślą jaźń".

Od razu rzuca się w oczy, że pierwsza i druga czcionka na tym screenie nie posiadają polskich znaków, trzecia natomiast - posiada. Kiedy znajdziemy już odpowiadającą nam czcionkę, musimy wgrać ją na bloga. Jak to zrobić? Wybieramy ikonę quick-use, zaznaczoną na poniższym screenie:

Po przekierowaniu na stronę czcionki, zjeźdzamy na dół strony, szukając poniższych informacji:

Zacznę od końca, a więc od punktu "4. Integrate the fonts into your CSS". Podany tam kod, to gotowa formuła na czcionkę do naszego szablonu - wystarczy dopasować odpowiedni selektor. Dla przykładu, zdefiniowanie tytuł postu z naszą czcionką wyglądałby tak:

h3.post-title {font-family: 'Audiowide', cursive;}

Nic trudnego, prawda? Teraz przechodzimy do zakotwiczenia naszej czcionki w naszym blogu. Posłuży nam w tym kod z punktu "3. Add this code to your website". Jak widać, mamy tam trzy sposoby, ja przedstawię ten podstawowy.

Wchodzimy w edycję HTML naszego kodu [zaplecze > szablon > edytuj kod HTML] i odszukujemy naszą sekcję head. Najprościej będzie wcisnąć klawisze ctrl + f i wpisać w oknie wyszukiwania </head> - w ten sposób znajdziemy znacznik, nad którym będziemy umieszczać nasz kod.

Wracamy na Google Fonts, kopiujemy kod z punktu trzeciego i umieszkamy go przed zamknięciem sekcji nagłówkowej. Niestety w takiej formie blogger go nie przyjmie - potrzebujemy jeszcze kilku modyfikacji.

Podstawowy kod wygląda następująco:

<link href='http://fonts.googleapis.com/css?family=Audiowide' rel='stylesheet' type='text/css'>

Przy próbie jego zapisania, pojawi nam się komunikat "Błąd podczas analizowania pliku XML, wiersz (...), kolumna (...): The element type "link" must be terminated by the matching end-tag "</link>""

A więc nie zastanawiając się długo, zamykamy nasz tag. Kod będzie wyglądał więc następujco:

<link href='http://fonts.googleapis.com/css?family=Audiowide' rel='stylesheet' type='text/css'></link>

Zmartwię Was - ale to jeszcze nie koniec. Tak zainstalowana czcionka, choć poprawnie, nie posiada poslkich znaków. Co zrobić, aby je dodać? Znów musimy lekko przekształcić nasz kod. Tuż po nazwie czcionki, musimy dodać "&amp;subset=latin,latin-ext". Nasz kod będzie więc wyglądał następująco:

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

Zapisujemy szablon i... gotowe! Możemy cieszyć się nową czcionką z polskimi znakami na naszym blogu!