Google Font”ları Nasıl Kullanılır?

Google Font”ları Nasıl Kullanılır?

20 Eylül 2014

google-font-kullanimi-1Takip ediyor musunuz bilmiyorum ama Google çok güzel fontlar üretiyor. Bir süredir Roboto adlı fontuna takılıp kaldım. Şimdi sizlere bu güzel fontları web sitemizde nasıl kullacağız ondan bahsedeceğim. Öncelikle Google.com/Fonts  adresini ziyaret edelim. Sol menüyü size tanıtmama izin verin; buradan hızlı bir şekilde aklımızdaki font tipini arayabiliriz.

Gördüğünüz gibi an itibariyle (20/09/14) sitede 651 font bulunmakta.Eğer ince bir font arıyorsanız Thickness seçeneği ile incelik seçip font yelpazesini daraltabilirsiniz. Slant seçeneği ise size eğimli yazı tipleri sunuyor. Eğer eğimi çok artırırsanız el yazısı tipinde fontlar karşınıza çıkacaktır. Son seçenek Width ise yazı karekterinin genişliğini belirtiyor.

Eğer aklınızda ismi belli bir yazı tipi arıyorsanız yukarıdaki arama çubuğundan da hızlı erişim sağlayabilirsiniz.

 

 

 

 

Ben kendime Lobster adlı fontu seçtim. Bu arada eğer font”u bilgisayarınıza indirmek isterseniz google-font-indir

şurada görmüş olduğunuz oku tıklayıp en üstteki seçenekten zip formatında indirebilirsiniz. Tabi eğer öyle bir seçenek mevcut ise.

 

 

 

Choose the character sets you want:
Buradan karakter setini seçiyoruz.  Latin Extended (latin-ext) olarak seçerseniz fontunuz hemen hemen her karakteri destekleyecektir.

Add this code to your website

İşte geldik asıl kısma. Burada 3 seçenek var. Standart sekmesi aktif iken karşımıza fontun css biçimindeki linki çıkıyor. Bu linki kopyalayıp web sitemizin <head> tag”ları arasına yapıştırıyoruz.

@import Sekmesine geçip buradaki kodu da CSS uzantılı dosyamızın en üstüne yapıştırıyoruz.

Son olarak hemen aşağıdaki css kod yapısını ise fontu kullanmak istediğimiz css kod bloğuna yapıştırıyoruz. Örneğin;
body{

font-family: “Lobster”, cursive;

background-color:#mu74t;

}

WEB DÜNYASI İLE İLGİLİ GÜNCEL BİLGİLER İÇİN ABONE OLUN!