W3.CSS Google Yazı Tipleri
W3.CSS ile yeni yazı tipleri eklemek son derece kolaydır.
- Kullanımı çok kolay (yalnızca CSS ve HTML)
- Harici yazı tipi kitaplıklarının sınırsız kullanımı (Google Yazı Tipleri gibi)
- Tüm modern tarayıcılarda çalışır
Bu Roboto
burası Sofya
Yanan Sofya
Web'i Yapmak!
Web'i Yapmak!
Web'i Yapmak!
Web'i Yapmak!
Web'i Yapmak!
Google Yazı Tiplerini Kullanma
Google Yazı Tiplerini kullanmak ücretsizdir ve aralarından seçim yapabileceğiniz 1000'den fazla yazı tipi vardır.
Web sayfanızın başında bir Google yazı tipine bağlantı verin:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
Ardından, nerede kullanılacağına ilişkin CSS'yi ekleyin:
body,h1,h2,h3,h4,h5,h6 {font-family: Roboto, sans-serif;}
Başka bir örnek
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sophia">
body,h1,h2,h3,h4,h5,h6 {font-family: Sofia, serif;}
Yazı Tipi Sınıfı Oluşturun
Web sayfanızın başında bir Google yazı tipine bağlantı verin:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sophia">
Ardından bir yazı tipi sınıfı oluşturun:
Örnek
.w3-sofia {
font-family: Sofia, cursive;
}
Web sayfanızda font sınıfını kullanın:
Örnek
<p class="w3-sofia">Making the Web!</p>
Web'i Yapmak!
Örnek
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
.w3-tangerine {
font-family: 'Tangerine', serif;
}
<p class="w3-tangerine">Making the Web Beautiful!</p>
Web'i Yapmak!
Örnek
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster">
Web'i Yapmak!
Örnek
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster&effect=shadow-multiple">
Web'i Yapmak!
Örnek
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Allerta+Stencil">
Web'i Yapmak!