CSS Google Yazı Tipleri
Google Yazı Tipleri
HTML'de standart yazı tiplerinden herhangi birini kullanmak istemiyorsanız Google Yazı Tiplerini kullanabilirsiniz.
Google Yazı Tiplerini kullanmak ücretsizdir ve aralarından seçim yapabileceğiniz 1000'den fazla yazı tipi vardır.
Google Yazı Tipleri Nasıl Kullanılır
Sadece <head> bölümüne özel bir stil sayfası bağlantısı ekleyin ve ardından CSS'deki yazı tipine bakın.
Örnek
Burada, Google Fonts'tan "Sofia" adlı bir yazı tipi kullanmak istiyoruz:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
}
</style>
</head>
Sonuç:
Sofia Font
Lorem ipsum dolor sit amet.
123456790
Örnek
Burada, Google Fonts'tan "Trirong" adlı bir yazı tipi kullanmak istiyoruz:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Trirong">
<style>
body {
font-family: "Trirong", serif;
}
</style>
</head>
Sonuç:
Trirong Font
Lorem ipsum dolor sit amet.
123456790
Örnek
Burada, Google Fonts'tan "Audiowide" adlı bir yazı tipi kullanmak istiyoruz:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Audiowide">
<style>
body {
font-family: "Audiowide", sans-serif;
}
</style>
</head>
Sonuç:
Audiowide Font
Lorem ipsum dolor sit amet.
123456790
Not: CSS'de bir yazı tipi belirlerken, her zaman en az bir yedek yazı tipi listeleyin (beklenmedik davranışlardan kaçınmak için). Bu nedenle, burada da listenin sonuna genel bir yazı tipi ailesi (serif veya sans-serif gibi) eklemelisiniz.
Mevcut tüm Google Yazı Tiplerinin bir listesi için Nasıl Yapılır - Google Yazı Tipleri Eğitimimizi ziyaret edin .
Birden Fazla Google Yazı Tipi Kullanın
Birden çok Google yazı tipi kullanmak için, yazı tipi adlarını aşağıdaki gibi bir çizgi karakteriyle ( |) ayırmanız yeterlidir:
Örnek
Birden çok yazı tipi isteyin:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong">
<style>
h1.a {font-family: "Audiowide", sans-serif;}
h1.b {font-family: "Sofia",
sans-serif;}
h1.c {font-family: "Trirong", serif;}
</style>
</head>
Sonuç:
Audiowide Font
Sofia Font
Trirong Font
Not: Birden fazla yazı tipi istemek web sayfalarınızı yavaşlatabilir! Bu yüzden dikkatli olun.
Google Yazı Tiplerini Şekillendirme
Elbette Google Yazı Tiplerini CSS ile istediğiniz gibi şekillendirebilirsiniz!
Örnek
"Sofya" yazı tipine stil verin:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
text-shadow: 3px 3px 3px #ababab;
}
</style>
</head>
Sonuç:
Sofia Font
Lorem ipsum dolor sit amet.
123456790
Yazı Tipi Efektlerini Etkinleştirme
Google, kullanabileceğiniz farklı yazı tipi efektlerini de etkinleştirmiştir.
Önce Google API'sine ekleyin, ardından özel efekti kullanacak öğeye özel bir sınıf adı ekleyin. Sınıf adı her zaman ile başlar
ve ile biter .effect=effectnamefont-effect-effectname
Örnek
Ateş efektini "Sofya" yazı tipine ekleyin:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia&effect=fire">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
}
</style>
</head>
<body>
<h1 class="font-effect-fire">Sofia on
Fire</h1>
</body>
Sonuç:
Sofia on Fire
Birden çok yazı tipi efekti istemek için, efekt adlarını aşağıdaki gibi bir çizgi karakteriyle ( |) ayırmanız yeterlidir:
Örnek
"Sofya" yazı tipine birden fazla efekt ekleyin:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
}
</style>
</head>
<body>
<h1 class="font-effect-neon">Neon Effect</h1>
<h1 class="font-effect-outline">Outline
Effect</h1>
<h1 class="font-effect-emboss">Emboss
Effect</h1>
<h1 class="font-effect-shadow-multiple">Multiple
Shadow Effect</h1>
</body>
Sonuç:
Neon Effect
Outline Effect
Emboss Effect
Multiple Shadow Effect