Beauty

Jak zainstalować niestandardowy font na Bloggerze?

Efektowny font sprawia, że blog prezentuje się wyjątkowo. Niestety wybór w domyślnym systemie Bloggera jest niewielki, gdyż większość pozycji nie obsługuje polskich znaków diakrytycznych. Dobrym rozwiązaniem jest instalacja zewnętrznych fontów z Google Fonts, jednak również tam wybór, choć spory - jest ograniczony.

Przeczytaj: Jak zainstalować czcionkę Google Fonts na Bloggerze?

W tym tutorialu zaprezentuję sposób instalacji dowolnie wybranego fontu, który można pobrać z internetu. Jest wiele miejsc w sieci, z których można ściągnąć darmowe fonty, np:
Najważniejsze jest jednak sprawdzenie, czy dany font wyświetla polskie ogonki, gdyż tylko wtedy tekst będzie prezentował się dobrze.

By uniknąć straty czasu na szukanie, posłużę się stroną, która posiada już wydzielone fonty z polskimi znakami. Jest to:

https://www.fontsquirrel.com/fonts/list/language/polish

Ja wybrałam font "Montez", bo mimo iż znajduje się na Google Fonts, to jednak tam nie obsługuje ogonków.

Pobieranie fontu

Wejdź pod powyższy link, wyszukaj font, który chcesz zainstalować, po czym kliknij Download TTF.
Plik zostanie umieszczony na pulpicie komputera. Archiwum należy rozpakować, np. programem WinRar. By to zrobić, kliknij na pliku prawym przyciskiem myszy i wybierz Wypakuj tutaj.
Plik fontu pozostaw, a wszelkie pliki tekstowe możesz usunąć.

Konwersja fontu do innych formatów

Posiadasz już font w formacie .ttf, jednak potrzebne są również: .eot, .woff i woff2. Konwersji dokonasz, wchodząc na stronę:


Tu otrzymasz font w formacie .eot. W opcji The EULAs the font allow this conversion zaznacz Yes.
Następnie wciśnij Pick Font File, wybierz plik fontu w formacie .ttf z komputera (ten, który pobrałeś) i wciśnij Convert.
Znowu wypakuj archiwum.
Teraz masz już dwa formaty fontu.
Teraz przekonwertuj .ttf na .woff. W tym celu skorzystaj ze strony:


Wykonaj czynności takie, jak w poprzednim konwertowaniu. Pamiętaj jednak, by nie pomylić się (jako, że na pulpicie masz już dwa formaty fontu) i wybrać ten o rozszerzeniu .ttf.
Na koniec przekonwertuj .ttf na woff2. Skorzystaj ze strony:


Gotowe! Teraz sprawdź, czy na pulpicie znajdują się 4 różne formaty fontu: .ttf, .eot, .woff i .woff2.

Hostingowanie fontu

Jeśli masz wykupione miejsce na serwerze (nie myl z domeną), możesz na nim umieścić pliki. Jednak, jeśli nie i chcesz skorzystać z darmowego rozwiązania, załóż konto na Dropboxie. Do tej pory Dysk Google (Google Drive) oferował możliwość hostowania plików (istniały do tego odpowiednie linki, lecz było to rozwiązanie nieoficjalne), jednak widnieje informacja, iż od sierpnia tego roku nie będą one obsługiwane.

Zaloguj się na swoim koncie na Dropbox:

Konta Dropbox utworzone po 4 października 2012 r. nie zawierają folderu publicznego. Nie musisz go mieć i możesz skorzystać z łączy publicznych - przeczytaj więcej. Jeśli jednak chcesz utworzyć folder publiczny kliknij ten link: Utwórz folder publiczny.

Kliknij Public, by wejść do folderu.
Kliknij ikonę Nowy folder.
Wpisz nazwę folderu. U mnie są to Fonty.
Kliknij, by wejść do utworzonego folderu.
Jeśli w folderze zamierzasz przechowywać więcej, niż jeden font, by uniknąć bałaganu najlepiej, byś stworzył podfolder (w ten sam sposób, co folder), z nazwami fontów. Następnie kliknij ikonę Prześlij...
Możesz użyć standardowego menedżera przesyłania, wciskając Wybierz pliki...
... albo wybrać szybszy sposób, polegający na przeciągnięciu wszystkich plików do okna z dyskiem Dropbox. By to zrobić zminimalizuj okno przeglądarki i ustaw obok plików (tak, by były widoczne). Zaznacz 4 formaty fontu, przeciągnij je i upuść w oknie Dropbox.

Instalacja fontu na Bloggerze

Nie zamykaj jeszcze karty z dyskiem Dropbox. Otwórz drugą kartę z panelem Bloggera i zaloguj się do niego. Kliknij Szablon => Dostosuj.
Wybierz kolejno: Zaawansowane => Dodaj arkusz CSS i do okienka wklej poniższy kod:
@font-face {
font-family: 'Nazwa_fontu';
font-style: normal;
font-weight: 400;
src: local('Nazwa_fontu'),
url('Link_do_fontu.woff2') format('woff2'), 
url('Link_do_fontu.woff') format('woff'),
url('Link_do_fontu.ttf') format('ttf'),
url('Link_do_fontu.eot') format('eot');
}
Tekst zaznaczony na żółto należy zamienić:
  • Nazwa_fontu => wpisz nazwę swojego fontu
  • Link_do_fontu => wklej bezpośrednie adresy odnośników z konta Dropbox, pamiętając o rozszerzeniach fontu
Przejdź na kartę z Dropboxem, na pliku fontu kliknij prawym przyciskiem myszy i wybierz Kopiuj łącze publiczne.
Kopiuj do schowka.
Wróć, do karty z Bloggerem i podmień dokładnie tę linijkę, w której zgadza się rozszerzenie (by się nie pomylić), czyli .woff2 na .woff2, .eot na .eot, itd.

Po kompletnej podmianie kod prezentuje się następująco:
@font-face {
font-family: 'Montez';
font-style: normal;
font-weight: 400;
src: local('Montez'),
url('https://dl.dropboxusercontent.com/u/155133632/Fonty/Montez/Montez-Regular.woff2') format('woff2'), 
url('https://dl.dropboxusercontent.com/u/155133632/Fonty/Montez/Montez-Regular.woff') format('woff'),
url('https://dl.dropboxusercontent.com/u/155133632/Fonty/Montez/Montez-Regular.ttf') format('ttf'),
url('https://dl.dropboxusercontent.com/u/155133632/Fonty/Montez/Montez-Regular.eot') format('eot');
}
Kiedy kod jest już gotowy, wciśnij Zastosuj do bloga.
Następnie kliknij Powrót do Bloggera.
Wybierz Szablon => Edytuj kod HTML
Jeśli arkusz stylu jest zwinięty, wciśnij strzałkę z lewej strony, by go rozwinąć.
Jeśli chcesz nowy font umieścić w tytule posta, wyszukaj w kodzie poniższy fragment (lub użyj wyszukiwarki Ctrl + F) i znajdź selektor h3.post-title

We fragmencie widocznym na obrazku poniżej zamień nazwę fontu na nową.
Zwiększyłam rozmiar fontu, wpisałam jego nazwę dokładnie taką, jak w kodzie @font-face i dodałam cursive, ponieważ font nie jest ani szeryfowy (serif), ani bezszeryfowy (sans-serif), ale ozdobny, pochyły.

Jeśli nie wiesz, co wpisać wypróbuj 3 opcje po kolei: cursive, serif, sans-serif.

W kodzie ważna jest zamiana wartości value, jeśli jednak podmienisz i default spowoduje to, że jeśli zresetujesz szablon, zmiana się zachowa.
Oto efekt: nowy font w tytule postów gotowy.
Na koniec jeszcze umieszczam małą ściągawkę, które selektory odpowiadają za który element bloga na Bloggerze (kliknij na obrazek, by go powiększyć):

Instagram