Logo

Blog o JavaScript, jQuery, HTML5, CSS3 i 4. Porady jak pisać dobrej jakości kod, tutoriale, nowości.

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

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.

Autor wpisu

Piotr cichosz (shpyo) — Front-end developer Twórca kilku serwisów internetowych oraz autor kilku blogów. Pasjonat nowych, otwartych technologii.

Komentarze

Gavatar procek

10.02.2012 procek

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

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

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.

Gavatar Michał

31.05.2012 Michał

Fajnie jakby się trochę lepiej renderowały bo w tej chwili ta pixeloza trochę bije po oczach

Gavatar proximo62

25.11.2012 proximo62

Dzięki za fonty, ale przy okazji: strona jest obcinana z lewej w rozdzieczości 1024 na 768 (Firefox, Opera, IE) w Chromie rozjeżdża się menu.

Gavatar as

22.12.2012 as

A testowal ktoś google web fonts pod ie8 lub 9? IE nie radzi sobie z nimi w ogóle - przynajmniej w moim przypadku (uzywam czcionki Open Sans)

Gavatar Mariusz

19.03.2014 Mariusz

Słyszałem już wcześniej o google fontach, ale do tej pory ich nie używałem. Dopiero dziś widzę, że to fajna rzecz. Dzięki.

Gavatar zeki

03.01.2015 zeki

Mam pytanie: Luckiest Guy ma polskie znaki diakrytyczne jak piszesz? Czy chochlik psikusa zrobił? Mam szablon oparty na tej czcionce i nie mam polskich znaków. W grę wchodzi póki co tylko spolszczenie, chyba, że masz jakiś sposób na nasze ogonki w tej czcionce?

Dodaj komentarz