Zestaw czcionek z polskimi znakami dla twojej następnej strony internetowej
Prezentowane wcześniej zestawienia czcionek cieszą się dosyć sporą popularnością, więc postanowiłem po raz kolejny przedstawić kilka ciekawych propozycji fontów gotowych do wykorzystania z @font-face oraz posiadających polskie znaki. Zawsze staram się wybierać czcionki, które są czytelne, proste i dają możliwość wykorzystania ich w wielu projektach. Osobiście niestandardowych czcionek używam do nagłówków lub nazwy serwisu, raczej staram się unikać wykorzystywania ich do dłuższych tekstów. Oto kilka kolejnych ciekawych propozycji dla twojej następne strony internetowej:
SamoSans-Regular
Darmowa jest tylko czcionka typu Regular.
Czytaj dalej...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
