Google Web Fontları Nasıl Kullanılır?

Web fontları, web tasarımcıların en çok tercih ettiği font türüdür. Web fontlarıyla hazırlanmış bir sitenin çevirisi yapılabilir, metin seçilebilir, herhangi bir olumsuz görüntü elde etmeden zoom yapılabilir, etkileyicidir ve avantajı grafik fontlara göre fazladır. En önemlisi web fontları Google tarafından bir metin olarak okunmasından dolayı SEO’ya da etkisi vardır.

Google Font Kullanımı

Google Fonts sayfasına giderek başlıklarda ya da metinlerde kullanmak istediğimiz fontu seçelim ve font alanın sol altındaki ileri ikonuna tıklayalım.

Google Web Fonts Kullanimi

Her fontun sağ üst köşesinde kırmızı renkte bir artı işareti görürsünüz. Google Web fontları arasında kullanmak istediğiniz fontu ya da fontları bu şekilde ekleyin. En fazla iki fontu eklemenizi öneririm, daha fazlası web sitenizi yavaşlatabilir.

Fontumuzu ekledikten sonra aşağıda çıkan siyah renkteki Families Selected barına tıklayalım. Bir pencere açılacaktır. Bu pencerede head tag’inize eklemeniz gereken kodu görebilirsiniz. Link ile başlayan kod head kodları arasında eklenmelidir.

Google Web Fonts Selected Font

Bir başlığa ya da bir yazıya bu fontlardan birini kullanmasını ifade etmek için CSS kodu eklemeniz gerekir. Başlık ya da yazının class, id ya da style etiketine de Specify in CSS alanındaki kodları ekleyerek, ilgili metnin Google Web Font kullanmasını istediğimizi açıklamış oluruz. Örnek olaran stil dosyamızda h1 etiketine bu fontu uygulamak isteyelim.

h1 { 
    font-family: 'Roboto', sans-serif; 
    font-weight: 400; 
}

h1 etiketine sahip yerler Roboto yazı karakterine dönüşecektir. Google Web fontlarının Türkçe’yi destekleyen karakterleri de bulunduğu için web sitenizi tasarlarken hem başlık, hem de içerikler için güzel sonuçlar elde edebilirsiniz.

Popular Eğitimler

Google Etiket Yöneticisi (Google Tag Manager) Nedir?

Google Analytcis, sitenize gelen ziyaretçilerin sayısı, kaç saniye durduğu gibi oturum bilgilerini…

Chart.js ile Veri Görselleştirme ve Grafik Tabloları

Bazı verileri, gösterge tabloları veya çizelgeler olmadan anlamak çok yorucu olabiliyor. Bu…

cPanel ile 1 Dakikada WordPress Kurulumu

Bu eğitimde WordPress kurulumu yapacağız, ama WordPress’i cPanel üzerinden kuracağız. Bir hosting…

CSS ile Resim Nasıl Kırpılır?

Resimleri tasarımlarınıza uyarlamak için bazen kırpmanız gerekebiliyor. CSS ile resimleri kırpmadan, kırpılmış…

Htaccess ile Resimlerin Çalınmasını Engelleme

Hotlink koruması ile web sitesindeki resimlerin çalınması nasıl engellenir? Hotlink protection cpanel üzerinden nasıl etkinleştirilir? Htaccess kullanarak resim çalınmasını engellemenin yolları nelerdir?

CSS Web Sitelerinde Kaydırma Çubuğu Renk Değiştirme

Bu HTML ve CSS eğitiminde herhangi bir JavaScript dosyası kullanmadan yandaki ScrollBar’ı…