jPortal.pl, to serwis dla miłośników JavaScript. Znajdziesz tutaj ciekawe porady oraz tutoriale, czyli porady "za rączkę", aby zrobić fajne efekty. Dowiesz się też jak tworzyć dobrej jakości kod.
Skoro J ("dżej" - ten gość po lewej) umie, to Ty też podołasz temu wyzwaniu :).

Web Fonts - czyli fajne i darmowe czcionki na strony www!

Opublikowany: 10.02.2012 07:22:24 | Komentarzy 3

Od dłuższego czasu na różnych stronach można spotkać elementy w których wykorzystuje się czcionki, które nie są dostępne na naszym OS. Co więcej, taki tekst da się zaznaczyć (nie jest w postaci grafiki) i coraz więcej czcionek obsługuje polskie znaki! Powstaje zatem pytanie: jak oni to robią?!

Z pomocą przychodzi nam Google ich jego projekt pod nazwą Web Fonts.

Co to jest Google Web Fonts?

Jest to tak naprawdę API, dzięki któremu Google dostarcza wysokiej jakości czcionki, które można używać na swoich stronach. Korzystają na tym wszyscy, bo strony stają ciekawsze i przyjemniejsze dla oka. Wspomniałem już o tym, że korzystanie z Web Fontsów jest banalnie proste i działają one na większości przeglądarek?

Kolejna dobra wiadomość jest taka, że Google ma w swojej bazie prawie 400 fontów. Część z nich obsługuje polskie znaki. Wszystkie dostępne strony znajdziecie w katalogu fontów. W pole "Preview Text" (w zakładce "Sentence") polecam wpisać tekst zawiejący polskie znaki. Im więcej ich będzie, tym lepiej dla nas, bo będzie mogli dobraj najlepszą czcionkę.

Wszystkie czcionki są open source, więc można z nimi robić co się chce - używać w swoich jak i komercyjnych projektach.

Jak się tego używa?

Wraz z tym wpisem na blogu zagoszczą na stałe custom fonty :). Na razie będą widoczne tylko w nagłówkach, ale za jakiś czas się to zmieni. Wybrana przeze mnie czcionka to Luckiest Guy :).

Aby używać tych fajnych czcionek, musimy dołączyć specjalny plik CSS.

http://fonts.googleapis.com/css?family=Luckiest+Guy

A następnie wybraną przez nas czcionkę zdefiniować dla wybranych tagów HTML. W praktyce, na podstawie wybranej przeze mnie czcionki "Luckiest Guy", wygląda to następująco:

h2 {
   font-family: 'Luckiest Guy', serif;
}
Nie zapomnij o podaniu innych fontów (domyślnych), które będą się renderować dla starszych przeglądarek, które nie wspierają "nowości".

Polskie znaki?

Jest to jeszcze dość problematyczne. Nie wszystkie fonty posiadają polskie znaki i przez to taki tekst nie wygląda atrakcyjnie. Polski znak jest pisany domyślną czcionką. Wybrana przeze mnie czcionka - Luckiest Guy - posiada polskie znaki. Jedyna recepta, to szukanie fontów z ogonkami. Jeżeli komuś się nie chce tego robić, to są listy czcionek, które je wspierają. Można je znaleźć tu, tu i tu.

Jeżeli będę miał chwilę, to postaram się zrobić listę fontów z polskimi znakami.

Tagi: czcionki na www darmowe fonty fontface google api google web fonts polskie czcionki google web fonts darmowe czcionki

Komentarze

Gavatar procek
10.02.2012, procek napisał/-a: Ważne, aby pamiętać o rozmiarze wybranego fontu - użycie 2 krojów z Latin Extended to kwestia 150 - 200KB, które użytkownik musi pobrać. Przyda się więc jakiś preloader w JS, który nie pokaże strony póki nie doczytają się fonty - brzydko to wygląda gdy nagle zmieniają się nam wszystkie napisy podczas wczytywania.
Gavatar Karix
09.03.2012, Karix napisał/-a: Warto "zainwestować" w takie czcionki. To może być fajne i oryginalne urozmaicenie dla naszego bloga czy innej strony. Widzę, że autor już zainstalował te czcionki u siebie :)
Gavatar Badi
04.04.2012, Badi napisał/-a: Niby to tylko czcionki, ale mogą mieć naprawdę pozytywny wpływ na przyciągnięcie czytelników do bloga. Podobno zostało to nawet gdzieś tam udowodnione, że oryginalne czcionki przyciągają oczy, tym bardziej, że większość używa tych standardowych.

Dodaj komentarz