Web Sayfalarında Google Fonts Kullanımı

Html ve Css ile web sayfaları oluştururken sayfamızdaki yazılara tarayıcıların varsayılan font-family değerleri uygulanır. Sayfamızdaki bir yazının font-family değerini değiştirmek istediğimizde ise kullanabileceğimiz değerler sınırlıdır.

Peki tasarımlarımızda farklı fontlar kullanmak istediğimizde ne yapmalıyız?

Farklı alternatifler var tabiki ama bu yazımda Google Fonts kullanımını anlatacağım. 

Google Fonts Kullanımı

Aşağıdaki gibi örnek Html kodlarımız olsun.

Bu kodları tarayıcıda görüntüleyelim.

google-fonts-kullanimi-0

Şuan da hem h1 etiketinin hem de p etiketlerinin font-family değerine tarayıcının varsayılan değerleri atandı. Şimdi Google Fonts kullanarak bu yazılara istediğimiz fontu uygulayalım.

Siteye gittiğinizde sizi 1005 farklı font bekliyor olacak. Eğer bildiğiniz bir font varsa direk arama kısmından fontu aratabilirsiniz. Yoksa da fontları tek tek inceleyerek hoşunuza giden fonta tıklayabilirsiniz.

google-fonts-kullanimi-resimli-anlatim-2

 ⇒  Örneğimizde Dancing Script fontunu kullanacağım. Arama kutusundan aratıp ilgili fonta tıklıyorum.

google-fonts-nedir-3

 ⇒  Dancing Script fontunun 400, 500, 600 ve 700 kalınlığındaki tüm stillerini kullanmak istediğim için hepsinin sağındaki “Select this style” butonuna tıklayarak hepsini ekliyorum.

web-tasarim-google-fonts-4

 ⇒  Gerekli linkleri almak için Embed butonuna tıklıyorum.

html-google-fonts-kullanimi-5

 ⇒  Html sayfamda bana gerekli olacak kodları buradan alıyorum.

css-google-fonts-kullanimi-6

 ⇒  İlk olarak linki kopyalayıp Html sayfamdaki <head> </head> etiketleri arasına yapıştırıyorum.

 ⇒  Daha sonra Html sayfamdaki hangi etikete bu fontu vermek istiyorsam font-family özelliğine “Dancing Script” değerini veriyorum.

Şimdi yukarıdaki Html kodlarımıza geri dönelim ve h1 etiketine farklı bir font p etiketlerine farklı bir font uygulayalım.

Kodlarımızı tarayıcıda açalım.

google-fonts-nasil-kullanilir-1

Gördüğünüz gibi sayfamızdaki yazılara istediğimiz Google Fonts değerlerini başarıyla uyguladık.

Umarım “Web Sayfalarında Google Fonts Kullanımı” başlıklı yazım sizin için faydalı olmuştur.

Şu yazılar da ilginizi çekebilir.

Siteye Google Analytics Kodu Ekleme (Resimli Anlatım)

Site Haritası Oluşturma ve Google’a Site Haritası Ekleme

Yeni bir yazımda görüşmek üzere.

Yorum Yazın