Web Sitede Kullanılan Yazı Fontunu Bulma (3 Yöntem)

Her web sitede iyi bir kullanıcı deneyimi için konsepte uygun farklı yazı tipleri kullanılır. Bazen çok ilginç yazı fontları görür ve bu fontu merak ederiz. Bazen de çok hoşumuza giden bir yazı biçimini kendi sitemizde ya da müşteri sitelerinde kullanmak isteriz. Bunun için de önce o web sitede kullanılan yazı fontunu bulmamız gerekir. Bu yazıda, bir web sitesinin hangi yazı fontunu kullandığını öğrenmenin farklı yollarına değineceğiz.

Sadece birkaç tıklamayla bir web sitesinde hangi yazı tiplerinin (tip, boyut, ağırlık, renk) kullanıldığını öğrenebilirsiniz. Siz de “bir web sitesinde hangi yazı tipinin kullanıldığını nasıl öğrenirim” diye merak ediyorsanız aşağıdaki yöntemleri deneyebilirsiniz.

Yöntem 1 – Kaynak Kodundan Yazı Fontunu Bulma

Bir web sitesinde kullanılan yazı tipini bulmanın en kolay yolu, kaynak kodunu kontrol etmektir. Bunun için aşağıdaki yolu izleyin:

  • Yazı fontunu öğrenmek istediğiniz web sitesini açın (Chrome, Safari ya da herhangi bir tarayıcıda)
  • Sayfanın boş bir yerine gelin ve sağ tıklayın
  • Açılır menüden “Sayfa Kaynağını Görüntüle” seçeneğini seçin.
Sayfa Kaynağını Görüntüle
  • Açılan yeni sayfada Windows için “Control + F” , Mac için “Command + F” tuşlarına basın.
  • Kaynak kodunda yazı fontunu bulmak için arama kutusuna “font” veya “font-family” yazın ve enter tuşuna basın.
  • Web sitesi Google Yazı Tiplerini veya diğer üçüncü taraf yazı tiplerini kullanıyorsa, ilgili yazı tipi URL’lerini CSS stil sayfaları olarak bulabilirsiniz.
Kaynak Kodundaki Fontlar
  • Gördüğünüz gibi, Google Fonts sunucusunun API’si olan fonts.googleapis.com’dan kullanılan iki font ailesi var.

ilgili- WordPress Yazı Tipi Değiştirme

Yöntem 2 – Geliştirici Araçları ile Web Site Yazı Fontu Bulma

Web sitesi üçüncü taraf yazı tiplerini kullanmıyorsa, sayfanın kaynak kodunda bir stil sayfası göremeyebilirsiniz. Şu durumda, ya özel yazı tipleri kullanılıyor ya da stil sayfasındaki sistem yazı tipleri kullanılıyordur.

Web sitesinin stil sayfasını görmenin en kolay yolu, tarayıcının geliştirici konsolunu kullanmaktır. Kullanılan fontu font-family CSS özelliği ile bulabilirsiniz. Bunu yapmak için:

  • Web sayfasındayken boş bir yere sağ tıklayın ve “İncele” ya da “Öğeyi Denetle” seçeneğini tıklayın.
İncele/Öğeyi Denetle
  • Geliştirici araçlarını gördüğünüzde, öğe seçim aracına tıklayın (aşağıdaki görselde belirtilen 1. adım) ve ardından imleci web sayfasındaki herhangi bir metnin üzerine getirin (2. adım).
  • Aşağıdaki görselde olduğu gibi, metin üzerine geldiğinizde, yazı tipi ayrıntıları dahil öğe ile ilgili detayları gösteren bir pencere göreceksiniz.
Web Sitede Kullanılan Yazı Fontunu Öğrenme
  • Yazı tipi ile ilgili daha fazla ayrıntı görmek isterseniz, üst kısımdaki “Sources” öğesine tıklayın.
  • Burada yazı tipleriyle ilgili her şeyi gösteren kısmı (fonts) bulun. Üzerine gelip çift tıkladığınızda alt öğe açılacak. Tıkladığınızda yan panelde font-family dahil birçok detay içeren kodlar göreceksiniz. Buradan bir web sitenin yazı tipini öğrenebilirsiniz.
Web site yazı fontu öğrenme

Yöntem 3 – Chrome Uzantıları Kullanarak Yazı Tipi Bulma

Tarayıcınızda bir uzantı kullanma muhtemelen en iyi ve hızlı seçenektir. Böylece her defasında kaynak kodlara girmek yerine sadece uzantıya tıklayıp web site yazı fontunu öğrenebilirsiniz.

  • Öncelikle Google Chrome Web Mağazası‘na gidin.
  • İlgili uzantıları filtrelemek için arama kutusuna “font” yazın.
  • Birkaç uzantı göreceksiniz. İlk sırada olan “What Font – font font” uzantısına tıklayın.
What Font Uzantısı
  • Bir sonraki ekranda uzantı ile ilgili tüm detaylar mevcut. Uzantıyı tarayıcınıza eklemek için “Chrome’a ​​Ekle” butonuna tıklayın.
  • Ardından “Uzantı ekle” düğmesine tıklayarak açılır pencereyi onaylayın. Bir başarı mesajı göreceksiniz ve geliştirici web sitesi, basitçe kapatabileceğiniz yeni bir pencerede açılacaktır.
  • Şimdi yazı tipini bulmak istediğiniz web sayfasını açın. Tarayıcının adres çubuğunun yanındaki bulmaca simgesine tıklayın ve “What Font – find font” uzantısını seçin.
Uzantı Etkinleştirme
  • Şimdi, yazı tipini bulmak için imleci sayfadaki metin öğelerinin üzerine getirin. Yazı tipi ailesini, stilini, satır yüksekliğini, boyutunu ve renk ayrıntılarını gösteren bir açılır pencere görmek üzere metne tıklayabilirsiniz.
  • Sayfada birden fazla elemanın yazı tipi detaylarını almak mümkündür. Yazı tipi ayrıntılarını almak için sayfadaki farklı öğelerin üzerine gelerek tıklayabilirsiniz.
  • Son olarak, uzantıdan çıkmak ve sayfayı normal modda görüntülemek için uzantı penceresine tıklayın.

Bir web sitesinin hangi yazı tipini kullandığını kolayca bulmak için yukarıdaki yöntemlerden herhangi birini kullanabilirsiniz.

ilgilenebilirsin- SERP’lerde Yazıların Son Güncelleme Tarihi Nasıl Gösterilir?