Porady & Profesjonalne strony internetowe / usługi www

FONT, nie czcionka! – z czym to się je i jak “font” na stronie dodać.

O fontach słowem wstępu

Tworząc strony dla siebie, dla klientów, czy tak naprawdę dla kogokolwiek zapewne myśleliście czasami o zmianie domyślnych fontów na stronie. Motywy-kombajny zazwyczaj posiadają wbudowaną bazę Google Fonts i umożliwiają ich załadowanie na stronie(w mniej lub bardziej zręczny sposób), czasami są to moduły wtyczek(dla ostylowania elementu), a czasami całe wtyczki specjalnie obsługujące bazę fontów.

Oczywiście nie jest to reguła - jest jeszcze garść motywów, które ładują tylko i wyłącznie wykorzystane fonty z wybranymi grubościami, aby nie opóźniać strony, innym razem ładują je lokalnie(naprawdę rzadko), a w jeszcze innych przypadkach motywy używają tzw. websafe fonts(czyli fonty, które mają oferować maksymalną kompatybilność wyświetlania niezależnie od systemu/przeglądarki).

Sam od już dość sporego czasu ładuję manualnie(wbrew pozorom to nie takie trudne) fonty na stronie za pomocą kilku linijek kodu z bazy Google i robię to kiedy jest to tylko możliwe i jest to moim zdaniem najlepszy sposób.

No dobra, wtyczki pod bazy fontów są fuj - więc jak?

Można oczywiście pójść na skróty - jeszcze kilka miesięcy temu poleciłbym wtyczkę Easy Google Fonts ale w ciągu ostatniego roku było z nią tyle problemów(w pojedynczych przypadkach nawet powodowała 500-tki na stronach), że kompletnie zrezygnowałem z jej używania. No i sposób w który ładowała fonty też pozostawiał wiele do życzenia. Są jeszcze takie wtyczki np. jak Styleguide – Custom Fonts and Colors - ta akurat wygląda na często aktualizowaną i daje całkiem sporo możliwości, choć osobiście nie testowałem. Szczerze mówiąc już nawet nie mam ochoty testować tych wszystkich "stylujących" wtyczek i zaciągam ze zbioru tylko to, czego potrzebuje.

Jednak proces ten może być trochę zbyt... bezpośredni. W bazie może nam się wydawać jakiś font bardzo fajny ale bez żywego podglądu ciężko nam przecież stwierdzić. Od tego mamy już np. Font Swappery - przykładowo może nim być ten dodatek do przeglądarki: Font Swap - for Google Fonts(dla FFa na pewno też się coś znajdzie :)). Umożliwia on nam zmianę fontów na stronie "na żywo", w tym również własnych elementów, jeśli jesteśmy w stanie określić klasę lub identyfikator elementu.

W bardzo prosty sposób i wystarczy nam do tego obojętnie jaka przeglądarka(na komputerze):

Należy pamiętać, że zawsze do klas należy dopisywać kropkę, a do id kratkę, czyli:

.jakas_tam_klasa
#jakies_tam_id

Oczywiście jest to najprostszy z przykładów - identyfikacja klasy, czy id danego elementu nie zawsze jest taka prosta i wymaga przynajmniej minimalnej wiedzy na temat prawidłowych zasad integracji kodu html/css. Więcej na temat selektorów przeczytacie tutaj.

Zamieniać wtyczkę wordpressową na rozszerzenie przeglądarki? Gdzie tu logika?

Ano jest. Wtyczki wordpressowe mogą na dłuższą metę spowodować problemy z instalacją, nieprawidłowo importują fonty(czyli np. wszystkie grubości danej pozycji) lub po prostu cierpią na kompletny brak wsparcia(spójrzcie tutaj - w ciągu ostatniego pół roku autor odpowiedział tylko RAZ). W przypadku rozszerzeń przeglądarkowych używamy ich tylko do poglądu - nie musimy nawet przeładowywać strony, poza tym nie obciążamy samej instalacji. No i w najgorszym przypadku dodatek po prostu przestanie działać, nie nabroi on nam w żaden sposób w przeglądarce.

Gdzie mogę sobie przetestować googlowskie fonty?

Teoretycznie jest kilka miejsc, natomiast w praktyce najważniejsze będą dwa adresy:
fonts.google.com
fontcdn.org

#Są oczywiście jeszcze inne bazy fontów takie jak Typekit od Adobe, FontSquirrel, czy fonts.com - problem w tym, że nie są to w pełni darmowe serwisy lub nie umożliwiają od ręki wykorzystania danej pozycji, więc zostaję po prostu przy darmowym Google Fonts.

Obie bazy wyglądają praktycznie tak samo... więc po co dodatkowo zawracać sobie głowę FontCDN?

Obie bazy dotyczą fontów googlowskich, natomiast CDN umożliwia bardzo fajną opcję - globalną zmianę przykładowego tekstu, na stronie google niestety musimy zmieniać pojedynczo. Dwa, FontCDN umożliwia bezpośredni import kodu po kliknięciu w pozycję - nie musimy się bawić w dodawanie kolejek. Trzy - generalnie filtrowanie jest bardziej przyjazne dla użytkownika.

#Dziwi mnie osobiście, że po tylu latach doświadczeń Google potrafi jeszcze stworzyć tak niewygodne interfejsy ale to już taka moja dygresja.

O czym pamiętać przy wyborze?

1. Jeśli myślimy o integracji fonta na naszej stronie w języku polskim, to pamiętajmy o zaznaczeniu zbioru "Latin Extended" - w ten sposób jeśli dany font będzie obsługiwał polskie znaki, to na pewno się one wyświetlą.

2. NIE WSZYSTKIE fonty nawet z grupy "latin extended" posiadają zbiór polskich znaków diakrytycznych. Dlatego niezwykle ważnym jest, aby przetestować font na zdaniu, które posiada przynajmniej kilka takich znaków(może być też tak, że znajdziemy "ó", jednak "ź","ż", czy "ą" już nie będzie).

przykład braku polskich znaków

Do testów możemy wykorzystać popularny pangram dla języka polskiego: Pchnąć w tę łódź jeża lub ośm skrzyń fig.

Są też skrajne przypadki, gdzie np. google w bazie ma zapisany font bez "polskich znaków", jednak w sieci można już pobrać wersję z takim zbiorem(niezwykle rzadkie sytuacje ale pojawiają się). Takim przykładem jeszcze ok. dwa lata temu był font o nazwie "Raleway" - bardzo często(co ja mówię... to była istna plaga) używano tego fonta na różnych motywach, jednak w przypadku zmian tekstów na język polski pokazywały się "dziwne litery" - w takim przypadku możemy lokalnie zaimportować font na stronę ale o tym później.

3. Pamiętaj o tym, żeby przy wyborze opcji zaznaczyć tylko i wyłącznie grubości fonta, których będziesz używać. Nie myśl na zasadzie "może się przydać" - ładowanie dodatkowych grubości to opóźnianie ładowania strony. Zazwyczaj są to maksymalnie 4 grubości - 300/400(dla paragrafów) i 600/700(czyli boldy, dla pogrubień, nagłówków i tytułów.

4. Nie przesadzaj z wyborem fontów odręcznych(czy innych, ze wzorkami) - im bardziej "koślawe", tym gorzej się czyta. Obecnym trendem jest minimalizm i nie bez powodu stosuje się stonowaną typografię, aby nie zniechęcać potencjalnych czytelników. Więcej na temat zasad typografii przeczytacie na blogu eduweb oraz na blogu grafmag.

Skąd zaczerpnąć inspirację na "ciekawą" typografię(lub generalnie design)? Jest od tego całkiem fajna strona - www.gomoodboard.com; wrzucacie obrazek i na jego podstawie wyszukiwane są różne przykłady w jego stylu.

Wybrałem/am swoje fonty, co teraz?

>> Dajmy na to, że nasz wybór padł na Open Sans w grubościach 300/600 oraz Oswald z grubością 500. Fonty będziemy integrować na stronie z polską zawartością, więc będzie nam potrzebny zestaw polskich znaków diakrytycznych.

1. Po kliknięciu na plusiki przy obu fontach w bazie klikamy na "Families selected", po czym od razu przechodzimy do zakładki "Customize". Wybieramy tutaj grubości light 300 oraz semi-bold 600 dla Open Sans oraz medium 500 dla Oswald. Poniżej w "Languages" zaznaczamy "Latin Extended".

2. Wracamy do zakładki "Embed".

3. Teraz widać, że Google daje nam dwa przykłady integracji fontów, czyli link typu "stylesheet" oraz @import:

Google fonts integracja - standard
Google fonts integracja - import

Generalnie otrzymujemy dwa kody.

Jeden, który dodajemy w nagłówku strony:

<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,600|Oswald:500&subset=latin-ext" rel="stylesheet">

Alternatywnie drugi do wklejenia bezpośrednio do arkusza stylów(pliku CSS):

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,600|Oswald:500&subset=latin-ext');

Są to bezapelacyjnie najprostsze sposoby integracji. Niestety, w WordPressie NIE INTEGRUJEMY FONTÓW W TEN SPOSÓB.

Niektórzy korzystają z tych sposobów, jednak należy pamiętać, że integracja skryptów oraz stylów - w tym i również fontów powinna odbywać się za pomocą odpowiedniej funkcji. Robi się to, aby utrzymać maksymalną kompatybilność pomiędzy zainstalowanymi wtyczkami/motywami i całą resztą. Więc nie jest to już nawet kwestia tworzenia "zgodnego ze sztuką" - chodzi tutaj również o uniknięciu przyszłych, potencjalnych problemów. Więcej na temat integracji i jej zasad przeczytacie na podstronie podręcznika developera WordPressa(niestety po angielsku).

Idąc dalej - jeśli jest to wasz, autorski motyw, to pomijacie ten krok. Jeśli nie, to wypada stworzyć motyw potomny(tutaj dowiecie się jak takowy stworzyć, ewentualnie możecie w prosty sposób stworzyć motyw potomny za pomocą generatora).

4. Wracamy teraz do punktu 3 i kopiujemy zawartość linka, czyli przykładowo cały kod po w nawiasach href.

W skrócie będzie to:

https://fonts.googleapis.com/css?family=Open+Sans:300,600|Oswald:500&subset=latin-ext

Następnie tworzymy nową funkcję:

function w3wg_add_google_fonts() {
wp_enqueue_style( 'w3wg-google-fonts', '', false );
}
add_action( 'wp_enqueue_scripts', 'w3wg_add_google_fonts' );

function w3wg_add_google_fonts() {} - odpowiada za otwarcie funkcji i jej nazwę.

wp_enqueue_style( 'w3wg-google-fonts', '', false ); - odnosi się do kolejkowania stylu(dodaje go po prostu do listy ładowanych stylów), następna jest unikalna nazwa dla owego stylu, w pustym apostrofie jest miejsce na adres stylu(bezpośredni) oraz false podkreśla, że dany arkusz nie posiada wersji(arkusze stylów dla fontów google nie są w żaden sposób "wersjonowane").

add_action( 'wp_enqueue_scripts', 'w3wg_add_google_fonts' ); - podpina funkcję pod konkretną akcję; add_action jest dyrektywą dodającą akcję, wp_enqueue_scripts jest nazwą akcji, do której się podpinamy, natomiast w3wg_add_google_fonts jest po prostu nazwą naszej funkcji.

Do 2 linii w puste miejsce pomiędzy apostrofami dopisujemy wcześniej skopiowany link, w efekcie otrzymamy kod:

function w3wg_add_google_fonts() {
wp_enqueue_style( 'w3wg-google-fonts', 'https://fonts.googleapis.com/css?family=Open+Sans:300,600|Oswald:500&subset=latin-ext', false );
}
add_action( 'wp_enqueue_scripts', 'w3wg_add_google_fonts' );
- taki kod jest gotowy do wklejenia.

5. Stwórz kopię zapasową pliku functions.php

6. Następnie skopiuj kod do pliku functions.php(musi być po znaczniku <?php oraz przed ?>, jeśli znajduje się w owym pliku).

Voila. W tym momencie macie prawidłowo zintegrowane fonty Open Sans oraz Oswald z wybranymi grubościami.

Teraz możecie ich używać dowolnie w arkuszach styli, czyli przykładowo:

body {
   font-family: 'Open Sans', sans-serif;
   font-weight: 300;
   font-size: 14px;
   line-height: 1.15;
   color: #000;
}

strong {
   font-weight: 600;
}

h1, h2, h3 {
   font-family: 'Oswald', sans-serif;
   font-weight: 500;
   font-size: 55px;
   line-height: 1.35;
   display: block;
   padding: 10px 0;

Proste nieprawdaż? 🙂


Wszystko fajnie, jednak teraz Google Page Speed pokazuje mi, że zintegrowane fonty opóźniają ładowanie strony, co teraz?

Jeśli nie myślicie na poważnie o optymalizacji swojej strony, to tak naprawdę nie jest to żaden poważniejszy problem. Już pomijam, że stosowanie się do wszystkich zaleceń Google Page Speed jest sztuką dla sztuki ale nie jest to żaden czynnik kluczowy przy ładowaniu strony.

No ale rozumiem, że niektórzy jednak woleliby zoptymalizować stronę pod tym kątem - nie ma problemu.

Do optymalizacji wyświetlania CSS fontów(naszych, googlowskich) będziemy używać tzw. "Web Font Loader" - jest to narzędzie optymalizujące wyświetlanie fontów, wspierające kilka różnych większych baz i dające przy tym sporo różnych możliwości(opcje głównie dla developerów).

Oczywiście takie rozwiązania nie są idealne:

  • Skrypt wspiera Google Fonts, Typekit, Fontdeck i Fonts.com.
  • Optymalizuje ładowanie fontów(ładuje je od razu po najważniejszych dla strony elementach), wliczając w to arkusze CSS.
  • Metoda wykorzystuje javascript - więc każdy, kto będzie miał wyłączone je w przeglądarce zobaczy "zamienniki".

Więc zaczynając.

1. Usuwamy całkowicie wcześniej utworzoną funkcję:

function w3wg_add_google_fonts() {
wp_enqueue_style( 'w3wg-google-fonts', 'https://fonts.googleapis.com/css?family=Open+Sans:300,600|Oswald:500&subset=latin-ext', false );
}
add_action( 'wp_enqueue_scripts', 'w3wg_add_google_fonts' );

2. Przechodzimy na stronę projektu Web Font Loader.

3. Ściągamy najnowszą wersję - aby to zrobić przechodzimy do zakładki "releases", klikamy na najnowszą wersję i klikamy na "Source Code(zip)".

#Jestem zupełnie świadom tego, że google udostępnia bibliotekę WFL przez CDN - natomiast na chwilę obecną jest to wersja 1.2.26, podczas gdy najnowsza to 1.2.28(w momencie, w którym tworzę ten wpis) - dlatego też będziemy ładować go lokalnie. Dwa - skrypt zajmuje zaledwie kilkanaście kilobajtów, więc nie popadajmy w skrajności 🙂

4. Rozpakowujemy paczkę. Jest w nim naprawdę sporo plików ale nas interesuje tylko jeden webfontloader.js znajdujący się w głównym katalogu.

5. W folderze z naszym motywem(lub motywem potomnym) tworzymy katalog o nazwie "js"(czyli będzie to mniej więcej coś takiego: http://mojastrona.pl/wp-content/themes/motyw-potomny/js/ ).

6. Wrzucamy tutaj plik webfontloader.js

7. Tworzymy nowy plik z rozszerzeniem .js - dajmy na to main.js(jeśli macie problem z utworzeniem takiego, to tutaj możecie pobrać gotowca).

8. Otwieramy plik main.js i wklejamy do niego kod:

jQuery(document).ready(function($) {
  WebFontConfig = {
    google: { families: [ 'Open+Sans:300,600:latin-ext', 'Oswald:500:latin-ext' ] }
  };
});

#Jak widzicie tutaj dodaje się fonty w nieco inny sposób - Format działa na zasadzie: Nazwa+Fonta:XXX:język, gdzie XXX to grubości(więcej niż jedną dodaje się po przecinku). Edytujemy w zasadzie jedną linię.

Plik zapisujemy.

8. Zmodyfikowany plik main.js wrzucamy do folderu /js/.

9. Następnie wracamy do pliku functions.php - musimy tutaj stworzyć funkcję rejestrującą oba skrypty.

10. Do pliku functions.php dodajemy następującą funkcję(przed modyfikacją pamiętaj o kopii bezpieczeństwa!):

function webfontloader_init() {
wp_register_script( 'webfontloader', get_stylesheet_directory_uri() .'/js/webfontloader.js', '', '1.6.28', false );
wp_register_script( 'main', get_stylesheet_directory_uri() .'/js/main.js', false, false );
wp_enqueue_script( 'webfontloader' );
wp_enqueue_script( 'main' );
}
add_action( 'wp_enqueue_scripts', 'webfontloader_init' );

function webfontloader_init() {} - odpowiada za otwarcie funkcji i jej nazwę.

wp_register_script( 'webfontloader', get_stylesheet_directory_uri() .'/js/webfontloader.js', '', '1.6.28', false ); - rejestruje pierwszy skrypt, w tym przypadku webfontloader. wp_register_script jest dyrektywą rejestrującą skrypt, webfontloader jest nazwą skryptu(musi być unikalna), następnie podany jest adres do skryptu(dlaczego przed ścieżką znajduje się get_stylesheet_directory_uri() ? Otóż jest to dyrektywa podająca adres arkusza stylów aktywnego motywu - w tym również potomnego). Pusty apostrof mówi o tym, że tablica(array) jest pusta. 1.6.28 jest wersją skryptu(nie ma wymogu jej stosowania - jest to udogodnienie dla developerów), natomiast false mówi, że skrypt nie ma być ładowany ze stopki.

wp_register_script( 'main', get_stylesheet_directory_uri() .'/js/main.js', false, false ); - podobnie jak powyżej, jednak tym razem bez wersji. Jest to dosłownie kilka linijek kodu w js i nie ma sensu nadawać temu żadnej wersji.

wp_enqueue_script( 'webfontloader' ); - dodaje do kolejki skrypt webfontloader, który wcześniej rejestrowaliśmy

wp_enqueue_script( 'main' ); - dodaje do kolejki nasz krótki skrypt js, który wcześniej rejestrowaliśmy

add_action( 'wp_enqueue_scripts', 'webfontloader_init' ); - podpina funkcję pod konkretną akcję; add_action jest dyrektywą dodającą akcję, wp_enqueue_scripts jest nazwą akcji, do której się podpinamy, natomiast webfontloader_init to nazwa naszej funkcji.

Zapisujemy.

Gotowe. W tym momencie z PageSpeed powinna zniknąć adnotacja o potrzebie optymalizacji arkusza CSS od ładowanych fontów.


W sieci mówi się o asynchronicznym ładowaniu, czy do fontów można to również wykorzystać?

Można, choć ciężko obecnie wyobrazić sobie scenariusz, w którym faktycznie byłoby to potrzebne. Odpowiednio skonstruowany motyw i Web Font Loader rozwiązują praktycznie całościowo problem optymalizacji fontów na stronie. Asynchroniczne ładowanie fontów tworzy tzw. "FOUT"(z ang. "Flash of Unstyled Text") - czyli krótkie przejście z nieostylowanego tekstu na docelowy, trwa to zazwyczaj mniej niż sekundę; na dłuższą metę jest to raczej oznaka słabo zaprojektowanej strony(lub kompromisów na które gotowy był pójść twórca przy projekcie, niekoniecznie faktycznie potrzebnych).

Również za pomocą Web Font Loadera, po prostu załadujemy asynchronicznie sam skrypt. Co prawda na stronie projektu jest informacja o implementacji z poziomu skryptu js, jednak my zrobimy to trochę inaczej.

Zrobimy to za pomocą prostej funkcji stworzonej przez Pana Scotta Parry'ego.

W skrócie - dodajemy do functions.php kawałek kodu:

function ikreativ_async_scripts($url)
{
    if ( strpos( $url, '#asyncload') === false )
        return $url;
    else if ( is_admin() )
        return str_replace( '#asyncload', '', $url );
    else
return str_replace( '#asyncload', '', $url )."' async='async";
    }
add_filter( 'clean_url', 'ikreativ_async_scripts', 11, 1 );

Działa on w ten sposób - najzwyczajniej w świecie szuka frazy #asyncload i jeśli ją znajdzie, to dodaje async='async' do url-a.

Teraz do wcześniej przygotowanej funkcji dodajemy #asyncload, jeśli chcemy wyjść z grubym działem możemy też od razu załadować skrypt ze stopki(zwiększy się FOUT):

function webfontloader_init() {
wp_register_script( 'webfontloader', get_stylesheet_directory_uri() .'/js/webfontloader.js#asyncload', false, true );
wp_register_script( 'main', get_stylesheet_directory_uri() .'/js/main.js', false, false );
wp_enqueue_script( 'webfontloader' );
wp_enqueue_script( 'main' );
}
add_action( 'wp_enqueue_scripts', 'webfontloader_init' );

Pamiętajcie, że dodawanie w ten sposób skryptów jest na własne ryzyko i zazwyczaj nie robi się tego, jeśli nie macie 100% pewności co robicie(ładowanie asynchroniczne to trochę bardziej skomplikowana kwestia, której niestety nie da się opisać w kilku słowach - więcej możecie się dowiedzieć choćby tutaj).

Co w przypadku fontów, które chcę ładować lokalnie?

Czasami bywa tak, że fonty chcemy lub musimy ładować lokalnie z serwera(w powody nie ma co wnikać) - w tym przypadku proces jest nieco inny, jednak o wiele mniej skomplikowany.

Google fonts w większości pobierzemy z Font Squirrel - wystarczy, że wpiszemy w wyszukiwarce nazwę, klepniemy enter i klikniemy na "download ttf".

Jeśli wybrany font się tam nie znajdzie, to możecie pobrać wszystkie fonty google z dedykowanego projektu na githubie - klikając tutaj.

Teraz zakładając, że pobraliśmy wybrany font lub już jakiś swój mamy wykorzystamy Generator na Font Squirrel:
web font generator

Proces wygląda następująco:

1. Rozpakowujemy paczkę z fontem.
2. Wchodzimy na stronę www.fontsquirrel.com/tools/webfont-generator.
3. Zaznaczamy tryb "optimal".
4. Zaznaczamy ptaszek "Yes, the fonts I'm uploading are legally eligible for web embedding."
5. Wybieramy wersje fonta, które będziemy używać.
6. Klikamy na "Download your kit". W tym momencie otrzymujemy paczkę z plikami gotowymi do integracji.

Fonty w paczce wystarczy skopiować do głównego katalogu motywu(lub motywu potomnego) i skopiować kod @font-face znajdujący się w pliku style.css do naszego aktywnego arkusza stylów.

Przykładowy kod:

@font-face {
    font-family: 'robotoblack';
    src: url('roboto-black-webfont.woff2') format('woff2'),
         url('roboto-black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

#Osobiście zalecam wrzucić fonty do folderu /fonts/, żeby nie robić bałaganu w folderze motywu - następnie po prostu zmodyfikować ścieżki url dodając fonts/ przed nazwą plików, czyli np. z powyższego kodu wyjdzie nam:
@font-face {
    font-family: 'robotoblack';
    src: url('fonts/roboto-black-webfont.woff2') format('woff2'),
         url('fonts/roboto-black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

#Czasami może być tak, że generator na Font Squirrel zwyczajnie przymuli albo cóż... zwiesi się. Zdarzyło mi się to nieraz i nie jest to nic nadzwyczajnego. W takim przypadku możecie skorzystać z generatora Transfonter. Zasada jest praktycznie taka sama - możemy też opcjonalnie przy subsets zaznaczyć "Latin Extended". Paczkę dostaniemy praktycznie taką samą jak w przypadku Font Squirrel.


To by było na tyle.

Artykuł dość rozległy ale mam nadzieję, że pokrywa przynajmniej sporą część zagadnienia 🙂