Wszystko co powinieneś wiedzieć o Google Web Fonts
Na blogu poświęciłem już trochę miejsca na opisanie funkcji @font-face. Zamieściłem także kilka darmowych fontów posiadających polskie znaki. Jak do tej pory nie opisałem jednak jednego z najciekawszych projektów Googla, czyli Google Web Fonts. Co to jest? W skrócie - darmowa usługa oferująca ponad 200 niestandardowych fontów, gotowych do wykorzystania w funkcji @font-face. W artykule tym opiszę jak korzystać z wspomnianej usługi, oraz jak w prosty sposób znaleźć czcionki z polskimi znakami w bazie Google Web Fonts.
Jak działa Google Web Fonts?
Podstawową zaletą Google Web Fonts jest prosta obsługa. Wystarczy minimalna wiedza na temat działania HTML i CSS, aby uatrakcyjnić typografie swojej strony.
Pierwszym krokiem jest dodanie niezbędnych fontów do naszego serwisu. Dokonujemy tego poprzez dodanie odpowiedniego linku do styli udostępnionych na serwerze Google (informacje o tym, gdzie generować ten link znajdują się w dalszej części artykułu):
<link href='http://fonts.googleapis.com/css?family=Ovo' rel='stylesheet' type='text/css'>Powyższy kod należy wkleić w sekcji <head> pliku HTML interesującej nas strony internetowej. Tym sposobem font o nazwie Ovo, został dodany do naszego serwisu i od teraz możemy go używać w komendzie CSS font-family. Na przykład, powiedzmy, że chcemy użyć niestandardowej czcionki w nagłówku naszego artykułu, do tego celu posłuży nam kod:
article h1 {
font-family: 'Ovo', serif;
(dalsze style dla nagłówka)
}I tym sposobem skorzystaliśmy z usług Google Web Fonts. Tak jak pisałem jest to niezwykle prosta i szybka metoda na uzyskanie interesującej niestandardowej czcionki na swojej stronie internetowej.
Czytaj dalej...Zestaw czcionek z polskimi znakami gotowych do użycia z @font-face
Niestandardowe czcionki są obecnie bardzo cenionym elementem wielu stron internetowych. Dzięki możliwościom oferowanym nam przez funkcje @font-face, jesteśmy w stanie w prosty sposób wzbogacić i urozmaicić projektowane przez nas serwisy. O ile dla anglojęzycznych webdeveloperów możliwości są ogromne, a ilość czcionek jest wręcz niewiarygodna, to dla rodzimych twórców jest to już pewien kłopot. Chodzi oczywiście o polskie znaki, które bardzo często są pomijane przez twórców. Dlatego podobnie jak przy poprzednim zestawie czcionek z polskimi znakami i tym razem przedstawiam kilka darmowych fontów posiadających polskie znaki, mogące być wykorzystane komercyjnie i możliwe do wstawienie przy pomocy funkcji @font-face.
Lato
Uwaga! Jak słusznie zauważył Tomek w komentarzu, czcionka ta nie posiada polskich znaków. W związku tym, że autor Łukasz Dziedzic napisał, iż znaki te pojawią się na początku 2011 roku i ponieważ jest to font polskiego autorstwa postanowiłem jednak nie usuwać go z listy. Napewno warto śledzić tą czcionkę.
Anivers regular
5 czcionek z polskimi znakami gotowych do użycia z @font-face
Dzięki zastosowaniu nowych możliwości CSS3 dostaliśmy możliwość dodania niestandardowych czcionek do projektów graficznych naszych stron. O ile wyszukanie czcionek udostępnionych do użycia przy pomocy @font-face nie stanowi większego problemu, to znaleźć taką, która posiada wszystkie polskie znaki, sprawia już pewne problemy. Dlatego w tym artykule chciałbym przedstawić kilka profesjonalnie prezentujących się fontów gotowych do użycia w waszych kolejnych projektach.
MyFairCody
Graublau-Sans
@font-face – własna czcionka na stronie internetowej
Typografia jest uznawana za jeden z najważniejszych czynników, uwzględnianych przy projektowaniu stron lub dowolnego elementu identyfikacji wizualnej. Obecnie jednak standardowy zestaw czcionek, jest niewystarczający do tworzenia pięknych i unikalnych projektów. Wielu grafików zaczęło sięgać po niestandardowe, często płatne zestawy fontów. O ile w przypadku identyfikacji wizualnej nie stanowiło to większego problemu, to dla stron internetowych pojawiały się znaczące komplikacje. Programiści musieli iść z duchem czasu i w jakiś sposób zaimplementować niestandardowe czcionki. Tym sposobem powstały m.in. sIFR, Cufon, FLIR, każde z nich miało swoje wady i zalety, ale dawały oczekiwany efekt. Wraz z nadejściem CSS3 programiści dostali nową opcje, czyli @font-face.
@font-face
@font-face jest regułą CSS, przy pomocy, której możesz ściągnąć, potrzebną do prawidłowego wyświetlania strony czcionkę, jeżeli jest ona nieobecna na komputerze użytkownika. Działa to w bardzo prosty sposób i polega na dodaniu tych linii kodu do naszego stylu CSS:
@font-face {
font-family: 'ExistenceLight';
src: url('../Existence-Light-webfont.eot');
}Jak widać powyżej definiujemy nową rodzinę czcionek, którą potem możemy wykorzystywać w dalszej części naszego kodu CSS. Podajemy jej nazwę, oraz wskazujemy na plik, który ewentualnie ma się ściągnąć. Wykorzystanie takie kodu może wyglądać tak:
h1 {
font: 60px/68px 'ExistenceLight', Arial, sans-serif;
letter-spacing: 0;
color:#930;
margin:20px 0;
}
p {
font: 16px/22px 'ExistenceLight', Arial, sans-serif;
letter-spacing: 1px;
margin-bottom: 10px;
}Zobacz jak prezentuje się efekt naszego kodu - demo.
Oczywiście nie może być zbyt pięknie i standardowo pojawiają się problemy w przypadku różnych przeglądarek. Zanim do tego przejdę, wypada poinformowanie, że opcja ta najwcześniej, bo już od wersji 4.0, zaimplementowana była w Internet Explorer. Obecnie wszystkie nowe przeglądarki wspierają tą regułę. Problem stanowi to, iż każda przeglądarka obsługuje różne formaty czcionek. I tak:
- Internet Explorer – EOT
- Chrome – TTF i SVG
- Mozilla – WOFF, OTF i TTF
- Opera i Safari – TTF, OTF i SVG
Jak dodać polskie znaki do dowolnej czcionki
Ile razy zdarzyła Ci się taka sytuacja: Znajdujesz tego idealnego, jedynego fonta który pięknie pasuje do twojego projektu a tu zamiast Ą wyskakują Ci jakieś krzaczki? Niestety wiele zagranicznych fontów nie posiada polskich znaków diakrytycznych, a wybór spolszczonych jest niewielki. Dzisiaj pokażę CI jak dodać nieistniejące znaki do czcionki.
Instalujemy niezbędne oprogramowanie
Aby dodać polskie znaki diakrytyczne potrzebny nam jest edytor czcionek, do wyboru jest wiele, darmowych i płatnych. Ja osobiście polecam FontForge. Jest to program OpenSource napisany dla systemu operacyjnego Linux. Nie należy się tym przejmować ponieważ deweloper przewidział możliwość instalacji na platformie Windows.
Aby program ruszył w Windows potrzebujemy zainstalować emulator środowiska Linuksa, program Cygwin. Pobieramy go z strony http://cygwin.com/ i rozpoczynamy proces instalacji. Program zapyta nas o ścieżkę programu, rodzaj instalacji, serwer pobierania i w końcu o wybór paczek do zainstalowania. Prędkość instalacji zależy głównie od wybranego serwera i naszego łącza. Ja polecam niemiecki i irlandzkie serwery FTP. Aby FontForge działał poprawnie należy zainstalować:
- podstawowe pliki programu
- system X Windows
- binutils
- lbng et libxm12
- X11
- X-startup-scriptsm
- XFree86-lib-compat
- xorg-x11-base
- xorg-x11-bin
- xorg-x11-dlls
- xorg-x11-lndir
- xorg-x11-etc
- xorg-x11-f100
- xorg-x11-libs-data
Niezaawansowani użytkownicy albo osoby które nie mają czasu i ochoty bawić się w dobieranie paczek mogą zwyczajnie zaznaczyć opcje instalacji wszystkiego, potrwa to trochę dłużej i zajmuje około 6GB miejsca na dysku.
Następnie należy pobrać paczki instalacyjne programu FontForge z strony http://fontforge.sourceforge.net/. Pobieramy pliki przeznaczone dla Cygwina czyli: fontforge_cygwin-20090914.tar.bz2. Paczkę tą należy pobrać do katalogu programu Cygwin. Domyślnie jest to: C:\cygwin\home\<username> (<username> to twoja nazwa użytkownika).
Teraz należy uruchomić Cygwina (w menu START i na pulpicie pod nazwą CygwinBashShell, ścieżka na dysku C: \cygwin\Cygwin.bat). Pojawi nam się okno konsoli. Wklepujemy w niej kolejno (z pominięciem znaku $):
$ tar xjf fontforge_cygwin-*.tar.bz2
$ cd fontforge
$ ./doinstall
Cygwin kolejno rozpakowuje FontForge, wchodzi do jego katalogu a następnie go instaluje (te operację wykonujemy tylko raz).
Czytaj dalej...
