“Czcionka na blogu” – wszystko, co wystarczy wiedzieć o fontach

Czcionka, czy font? Tak naprawdę o co chodzi? I czy każdy font ma polskie “ogonki” i gdzie go szukać? Jak sprawdzić, co się ma i gdzie? A kiedy już się znajdzie lepszy, taki piękny, idealny to jak wrzucić go na blog? Ha! Zaparz dużo dobrej herbaty, bo dziś przewodnik po temacie “czcionka na blogu”.

Podobno “Font nie czcionka!” Dlaczego?

Do niedawna właściwie sama nie do końca wiedziałam. Wiem, że branża grafików i developerów walczy z określaniem literek na stronie www mianem “czcionka”, ale nie zgłębiałam tematu. A okazuje się, że różnica jest zasadnicza! Otóż. Czcionka to taki fizycznie istniejący metalowy bloczek z literką, spacją lub znakiem. Z takich bloczków w drukarni układa się wyrazy i zdania i dzięki nim drukuje się materiały. Font natomiast to cyfrowa postać pisma z zachowaniem informacji o poszczególnych literach i znakach w postaci bitmapowej lub wektorowej. No wiem. Ała. Więc mówiąc po ludzku – font to jest właśnie to, co widzisz na ekranie swojego komputera (tableta, smarta, telephona, lodówki).

Gdzie szukać fontów i o czym pomyśleć?

Fonty darmowe i płatne znajdziesz w wielu miejscach. Oczywiście decyzja, czy zapłacić na font zależy od wielu czynników, ale na początek zdecydowanie odradzam. No, chyba, że masz bardzo konkretne plany biznesowe związane z blogiem, czy stroną. Wtedy może opłacić się zakup jakiegoś niepowtarzalnego fonta. Generalnie miejsca z fontami powinny wystarczyć dwa: Google Fonts oraz Fontspace (w obydwu znajdziesz bezpłatne fonty). W pierwszym znajdziesz również bez trudu fonty z “polskimi ogonkami” (wystarczy, że w filtrach wyszukiwania zaznaczysz w Languages opcję: Latin Extended). W drugim znalezienie fontów z polskimi znakami jest nieco trudniejsze (trzeba w okienko treści wpisać charakterystyczne polskie literki i sprawdzać, który font się poprawnie wyświetla). Korzystając z Fontspace koniecznie uważaj jeszcze na jedną rzecz – wiele z fontów tego serwisu jest bezpłatna jedynie do użytku niekomercyjnego, a informację o licencji znajdziesz przy każdym foncie). W ogóle z licencjami uważaj. Tak, tak, wiem, “nikt tego nie sprawdza”, ale jeśli nie dopilnujesz, może ci być wstyd, gdy kiedyś się okaże, że font masz kradziony… Przy okazji zdradzę ci sekret.

W kwestiach (nie tylko) wizerunkowych uczciwość… popłaca!

Co font ma, a czego nie ma

Cechy fontów to temat rzeka. Jeśli chcesz sobie dokładnie poczytać, odsyłam do Wikipedii, natomiast na potrzeby tego wpisu poruszę kwestie, które pojawiają się najczęściej w pytaniach o fonty na stronach. Umówmy się więc, że font więc może mieć:

Z tych trzech przy wyborze fonta najważniejsze są “polskie ogonki”. Ponieważ, jeśli twórca fonta ich nie przewidział, na twojej stronie po jego użyciu pojawią się ciekawe znaczki w słowach lub literki z innego fonta. Niestety obecność jednych i drugich skutecznie odstrasza Czytelników. Skoro wiesz już, jak szukać fontów z “polskimi ogonkami”, pozostają nam: rozmiar i kolory. I tu musimy zahaczyć o CSS. Przykro mi, inaczej się nie da. Ale nie taki diabeł straszny. Do dzieła! CSS to – znów uogólniając – język odpowiedzialny za wygląd. Jeśli nie masz większej wiedzy, to na dziś tyle ci wystarczy. Słyszysz CSS? Myślisz – wygląd. Wygląd, jak to wygląd, ma swoje cechy (wygląd człowieka też opisujemy cechami) i w CSS opisane są one dodatkowo właściwościami. To trochę tak, jakby powiedzieć, że “Bartek ma grzywkę (cecha) blond (właściwość).

Rozmiar i kolor fontów na stronie

Rozmiar i kolor fonta (jak również wiele innych rzeczy w CSS) sprawdzisz podglądając stronę w inspektorze kodu. Kliknij na dowolny element na stronie prawym przyciskiem myszy i wybierz “Zbadaj”, a otworzy ci się dodatkowe okno. Po lewej stronie zaznacz element, który cię interesuje, a po prawej sprawdź, jakie ma style. Zrobiłam screen mojego nagłówka h2, więc w skrócie wygląda to, jak poniżej.

Jeśli szukasz informacji, jaki rozmiar posiada twój font (cecha), to w kodzie rozejrzyj się za określeniem “font-size: 16px” (właściwość). Cała sztuka to znaleźć font-size dla odpowiedniego miejsca (inny będzie dla nagłówków: h1, h2, h3 itp, inny dla menu, inny dla treści wpisu). Czasem z pewnością zdarzy się, że zmienisz inny font, niż chcesz, ale w końcu na czym, jak nie na własnych błędach, się uczyć? Dobra wiadomość jest taka, że jeśli masz sympatyczny motyw, to rozmiar i kolory fontów ustawisz w Wygląd -> Personalizacja (lub innych: Theme Settings). Zanim zaczniesz grzebać w CSS – sprawdź tą ścieżkę.

Zmiany, zmiany, zmiany

Jeśli chodzi o fonty, to najprościej zmienić ich rozmiar lub kolor. Podejrzyj cechy w inspektorze kodu (jak wyżej), skopiuj te, które cię interesują, np.

i zmień na tyle px, ile potrzebujesz. Gdzie to zmienić? Masz kilka możliwości:

• poszukaj w personalizacji motywu pola Custom CSS i wklej w nim zmieniony kod,
• jeśli korzystasz z motywu potomnego wejdź w Wygląd -> Edytor, upewnij się, że edytujesz CSS motywu potomnego i wklej to, co chcesz zmienić,
• jeśli nie masz żadnego z powyższych – doinstaluj którąś z wtyczek umożliwiającą dodawanie custom CSS i za jej pomocą wpisz zmiany

Uwaga! Nigdy, kompletnie nigdy nie zmieniaj pliku CSS motywu bazowego. Twoje zmiany znikną bezpośrednio po aktualizacji motywu.

Najtrudniejsza sprawa to zmiana fonta na inny. Dlaczego najtrudniejsza? Ponieważ motywy są przeróżnie napisane (naprawdę przeróżnie) – jedne wspierają jakieś fonty, inne żadnych. Z drugiej strony przeglądarki też różnie fonty wyświetlają (zdarza się, że Firefox nie chce pokazać ładnego fonta z Fonts Google…). Jak żyć? Jeśli nie masz możliwości zmiany (dodania) fonta w personalizacji motywu (lub theme settings), spróbuj z wtyczką TK Google Fonts (oczywiście, jak nazwa wskazuje, wtyczka wspiera Google Fonts). Po jej instalacji i włączeniu wejdź w Wygląd -> TK Google Fonts i dodaj font, który chcesz mieć na blogu. A następnie przejdź do Wygląd -> Personalizacja -> TK Google Fonts i wybierz odpowiedni font w odpowiednie miejsce (masz do dyspozycji nagłówki H, body text i blockquotes). Jeśli masz trochę szczęścia i motyw jest dobrze napisany – wszystko pójdzie gładko (od razu uprzedzę, że rzadko się tak zdarza). Jeśli nie – trzeba będzie się bliżej zapoznać z plikami WordPressa i kodowaniem, ale to już nie w tym wpisie… Wiem. Dziś dużo treści i bardzo technicznie. Ale i temat wymagający. Oczywiście każdy podtemat można szeroooooooko rozwinąć i pewnie zrobię to w przyszłości. A dziś pytanie. Macie problemy z fontami? Jak sobie radzicie?