Yazı Fontu Bulma: Website Font Bulma Yöntemleri

Yazı fontu bulma konusunda yardıma mı ihtiyacınız var? Bilindiği üzere, her websitede iyi bir kullanıcı deneyimi için konsepte uygun farklı yazı tipleri kullanılmalıdır. Bazen çok hoşumuza giden bir yazı tipini kendi sitemizde ya da müşteri sitelerinde kullanmak isteriz. Bunun için de önce o sitede kullanılan yazı fontunu öğrenmemiz gerekir. Peki font bulma işlemi nasıl gerçekleştirilir? Bu kılavuz ile herhangi bir websitede hangi yazı fontunun kullanıldığını bulmanın farklı yollarına değineceğiz…

Evet, sadece birkaç tıklamayla yazı fontu bulma (tip, boyut, ağırlık, renk gibi) işlemini gerçekleştirmeniz mümkün. Siz de “bir websitede kullanılan yazı tipini nasıl öğrenirim” diye merak ediyorsanız aşağıdaki yöntemleri deneyin!

Yöntem 1 – Kaynak Kodundan Yazı Fontu Bulma

Bir sitede kullanılan yazı fontunu bulmanın en kolay yolu kaynak kodunu kontrol etmektir. Bunun için aşağıdaki adımları takip edebilirsiniz:

• Yazı fontunu öğrenmek istediğiniz web sitesini açın
• 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

• Açılan yeni sayfada Windows için “Control + F”, Mac için “Command + F” tuşlarına basın.
• Kaynak kodundan font bulmak için arama kutusuna “font” veya “font-family” yazın ve enter tuşuna basın.
• Websitesi Google Yazı Tiplerini veya diğer üçüncü taraf yazı tiplerini kullanıyorsa, ilgili yazı tipi URL’lerini CSS stil sayfaları olarak bulabilirsiniz:

• Gördüğünüz gibi Google Fonts sunucusunun API’si olan fonts.googleapis.com‘dan kullanılan iki font ailesi var.

Ayrıca okuyun: Resimden Font Bulma: En İyi 6 Font Bulucu Araç

Yöntem 2 – Geliştirici Araçları ile WebSite Font 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 ise 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ğine tıklayın.

• 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.

• 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:

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

Tarayıcınızda bir uzantı kullanmak muhtemelen en iyi ve en hızlı seçenektir. Böylece her defasında kaynak kodlara girmek yerine sadece uzantıya tıklayıp ücretsiz yazı fontu bulma işlemini gerçekleştirebilirsiniz.

• Ö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 – find font” uzantısına tıklayın.

• 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.
• Şimdi yazı tipini bulmak istediğiniz web sayfasını açın. Tarayıcının adres çubuğunun yanındaki uzantılar simgesine tıklayın ve “What Font” uzantısını seçin.

• Şimdi, font bulma işlemi 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.

Eğer projelerinizde kullanmak üzere özel yazı tipleri arıyorsanız, ücretsiz font bulma sitesi seçeneklerinden de faydalanabilirsiniz. En popüler font bulma sitelerinden bazıları şunlardır: GoogleFonts, Fonts Ninja, WhatFontIs, Identifont, Font Squirrel,  WhatFont. Bazılarının tarayıcı uzantıları da mevcut. Böylece yazı fontu bulma süreci için elinizin altında her daim farklı seçenekleriniz olmuş olacak.

Bir web sitesinin hangi yazı fontunu kullandığını kolayca bulmak için yukarıdaki yöntemlerden herhangi birini kullanabilirsiniz. Bu yöntemlerin font bulma /öğrenme konusunda faydalı olacağını umuyoruz. Ayrıca “WordPress Yazı Tipi Değiştirme İşlemi Nasıl Yapılır?” başlıklı kılavuzumuza da göz atmak isteyebilirsiniz.