Пред некое време Google ги претстави Font API и Font Directory, бесплатни веб сервиси кои им овозможуваат на веб дизајнерите на многу едноставен начин да ги користат бесплатните фонтови во нивните веб проекти.
Во овој туторијал ќе видиме како се користи Google Font API.
Прикачување на CSS стилот на избраниот фонт
Разгледајте ја колекцијата на фонтови на Google за да видите кои фонтови можете да ги користите. Во овој пример го избрав фонтот Molengo. За да го прикачиме CSS стилот на фонтот Molengo го користиме следниот код:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Molengo" />
За да вклучиме повеќе фонтови имињата на фонтовите ги поделуваме со ‘|’. Пр:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Molengo|Droid+Sans|Tangerine" />
Користење на фонтот на некои HTML елементи
За да го употребиме фонтот на некој HTML елемент користиме font-family.
h1 { font-family: Molengo, serif; }
p { font-family: Molengo, serif; }
Целосен пример
За да го видите целосниот пример кликнете тука.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Користење на Google Font API</title>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Molengo" />
<style>
h1 {
font-family: 'Molengo', serif;
font-size: 40px;
}
p {
font-family: 'Molengo', serif;
font-size: 15px;
}
</style>
</head>
<body>
<h1>Google Font API</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquet, turpis in dignissim posuere, ipsum arcu lacinia nisl, vitae cursus orci turpis ut sapien. Quisque faucibus purus odio.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam faucibus dictum luctus. Maecenas tristique scelerisque lectus, vitae elementum est convallis nec.</p>
</body>
</html>
Автор: Даниел Брзанов
За авторот: Здраво! Јас сум Даниел a.k.a. Delicon, се занимавам со веб дизајн и програмирање повеќе од 10 години и сакам да го споделам своето знаење со сите што се заинтересирани за тоа.
Одлично, фала.
Дали имате информација кои од фонтовите се со македонски карактери?
@Ванчо Орданоски
за жал ниту еден од понудените фонтови на Google нема кирилична поддршка.
Конечно и кирилични фонтови со поддршка македонски букви. http://www.google.com/webfonts?subset=cyrillic
[...] при создавањето на една веб-страна. На пример слободно користење на библиотеката со фонтови без грижи за лиценците. [...]