Google, aby ułatwić życie twórcom stron internetowych, wprowadziło publiczny i darmowy katalog czcionek oraz api umożliwiające łatwe ich wykorzystanie. Czcionki na naszych stronach ładowane są dynamicznie, co eliminuje konieczność posiadania ich w systemie przez osoby odwiedzające.
Przykład użycia czcionki Tangerine:
Kod powyższego przykładu:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<link rel="stylesheet"
type="text/css"
href="http://fonts.googleapis.com/css?family=Tangerine">
<style type="text/css">
#akapit {
font-family: 'Tangerine', serif;
font-size: 50px;
text-shadow: 4px 4px 4px #aaa;
}
</style>
</head>
<body>
<p id="akapit">devblog - antczak.org</p>
</body>
</html>
Użycie polega na podlinkowaniu pliku stylu
http://fonts.googleapis.com/css?family=[nazwa_czcionki]
oraz nadaniu elementowi strony stylu
font-family: '[nazwa_czcionki]', serif;
W tym przypadku użyty został także styl text-shadow (należący do specyfikacji CSS3) dający efekt cienia.
Zaawansowane opcje
Powyższy przykład pokazuje podstawowe opcje, to oczywiście nie wszystko. Jeśli chcemy załadować więcej niż jedną czcionkę, podajemy ja oddzielone znakiem potoku (jeśli czcionka ma w nazwie spację, zamieniamy ją na +):
http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans
Możemy także zmieniać krój pisma. Mamy do wyboru kursywę, pogrubienie oraz oba jednocześnie.
http://fonts.googleapis.com/css?family=Nobile:italic|Droid+Serif:bold|Cantarell:i,b
Możemy używać pełnej nazwy italic, bądź skrótu i, analogicznie bold i b. Stopień pogrubienie czcionki możemy także podać numerycznie.
Ładowanie czcionek na żądanie
Mechanizm dostarczony przez Google daje także możliwość ładowania czcionek na żądanie. Przydać się to możne np. przy projektowaniu wizytówki on-line. Użytkownik zmienia rodzaj czcionki, ta dopiero jest ładowana. Jeśli do wyboru jest dużo czcionek, to rozwiązanie idealne.
Nie będę szczegółowo opisywał kodu, jest to raczej przykład niszowy, ale jak najbardziej zachęcam do zapoznania się z nim.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Dynamiczne ladowanie czionek z Google Font Api</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js">
</script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
function loadWebFont(fontName) {
var font = new Object();
font.google = new Array('families');
font.google.families = new Array(fontName);
WebFont.load(font);
}
$("#nazwaCzcionki").change(function(){
var nazwaCzcionki = $(this).val();
loadWebFont(nazwaCzcionki);
$("#czcionka").html(nazwaCzcionki);
$("p").css("font-family",nazwaCzcionki);
});
});
</script>
<style type="text/css">
.wf-inactive p {
font-family: serif;
font-size: 16px;
}
.wf-active p {
font-size: 36px;
}
</style>
</head>
<body>
<div>
<select id="nazwaCzcionki">
<option value="serif">serif</option>
<option value="Cantarell">Cantarell</option>
<option value="Cardo">Cardo</option>
<option value="Crimson Text">Crimson Text</option>
<option value="Droid Sans Mono">Droid Sans Mono</option>
<option value="Droid Sans">Droid Sans</option>
<option value="Droid Serif">Droid Serif</option>
<option value="IM Fell">IM Fell</option>
<option value="Inconsolata">Inconsolata</option>
<option value="Josefin Sans Std Light">Josefin Sans Std Light</option>
<option value="Lobster">Lobster</option>
<option value="Molengo">Molengo</option>
<option value="Nobile">Nobile</option>
<option value="OFL Sorts Mill Goudy TT">OFL Sorts Mill Goudy TT</option>
<option value="Old Standard TT">Old Standard TT</option>
<option value="Reenie Beanie">Reenie Beanie</option>
<option value="Tangerine">Tangerine</option>
<option value="Vollkorn">Vollkorn</option>
<option value="Yanone Kaffeesatz">Yanone Kaffeesatz</option>
</select>
</div>
<p>Paragraf napisany czcionka <span id="czcionka">serif</span></p>
</body>
</html>
Działający przykład: http://antczak.org/source/dynamic_forms/
Dostępne czcionki: Katalog dostępnych czcionek (Google Font Directory)
No to jest naprawdę bardzo fajny ficzerek, no może zaraz po wykresach 🙂
Warto by wspomnieć że jak się chce mieć tą czcionkę pod IE to możemy zapomnieć o korzystaniu z tego dobrodziejstwa 🙂
piotroo89, wykresy są rzeczywiście mistrzowskie. Marcin, uruchom sobie przykład w IE, działa bez zarzutu.
ok twój przykład działa ale ja testowałem na czcionce 'Josefin Sans Std Light’ i niestety nie działa wniosek nie wszystkie czcionki działają pod IE 🙂
GDZIE MOGE POBRAĆ TE CZCIONKI GOOGLE,BO POD NAPISANYM NA TWOJEJ STRONIE ADRESEM ICH NIE MA.