Blog o JavaScript, jQuery, HTML5, CSS3 i 4. Porady jak pisać dobrej jakości kod, tutoriale, nowości.
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.
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.
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".
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.
Piotr cichosz (shpyo) — Front-end developer Twórca kilku serwisów internetowych oraz autor kilku blogów. Pasjonat nowych, otwartych technologii.
Komentarze
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.
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 :)
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.
31.05.2012 Michał
Fajnie jakby się trochę lepiej renderowały bo w tej chwili ta pixeloza trochę bije po oczach
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.
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)
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.
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?