Ücretsiz araç, kayıt gerekmez

Bu web sitesi hangi fontu kullanıyor?

Bir web sitesinin kullandığı fontları ağırlıkları, boyutları ve her birinin nerede kullanıldığıyla görmek için bir URL yapıştır. Ücretsiz, kayıt gerekmez. Anthropic'in fontları ve Airbnb'nin fontları gibi hazır örneklere bak ya da bir DESIGN.md dosyasının bunun üstüne neler eklediğini öğren.

Dene

Bu fontları kodunda kullan

Bulucu sana aile adlarını, ağırlıklarını ve her birinin hangi metinlerde kullanıldığını verir. Bunları yeniden kullanmak için her aileyi bir kez yükle, her role bir CSS değişkeni ver ve font yüklenirken ya da yüklenemezse metnin yine görüntülenmesi için yığını her zaman yedek fontlarla bitir.

1. Fontu yükle. Bir Google Fonts ailesi için <link> etiketini ekle ya da next/font/google kullan ve yalnızca bulucunun listelediği ağırlıkları iste. Ticari bir font için dökümhaneden bir web lisansı satın al ve dosyalarını @font-face ile sun.

2. Rolleri adlandır. Her iş için bir değişken: başlıklar için display, akan metin için body, kod için mono. Aile adlarını bulduklarınla değiştir.

:root {
  --font-display: "Inter Display", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; }
body { font-family: var(--font-body); font-weight: 400; }
code, pre { font-family: var(--font-mono); }

3. Tailwind'de kullan. Aynı yığınlar font-display, font-sans ve font-mono yardımcı sınıflarına dönüşür.

/* app.css, Tailwind CSS v4 */
@theme {
  --font-display: "Inter Display", "Inter", system-ui, sans-serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

Aileler bir yazı sisteminin yarısıdır. Her seviyenin boyutları, satır yükseklikleri ve harf aralıkları bir DESIGN.md dosyasının tipografi bölümünde yer alır ve kodlama ajanın bunları her ekranda uygulayabilir.

SSS

Font bulucu hakkında sorular

Ücretsiz Web Sitesi Font Bulucu hakkında kısa yanıtlar.

Sayfayı gerçek bir tarayıcıda açar ve görünen her metin parçasının hesaplanmış fontunu okur: tarayıcının gerçekten görüntülediği aileyi, ağırlığı ve boyutuyla birlikte. Ardından aileler gruplanır ve ne kadar metinde kullanıldıklarına göre sıralanır.

Hayır. Fontlar lisanslı yazılımlardır ve bir sitenin lisansı genellikle yalnızca o siteyi kapsar. Aile Google Fonts'taysa oradan ücretsiz alabilirsin; değilse dökümhanesini bul ve kendi kullanımın için bir lisans satın al.

Girdiğin tek sayfayı okur ve en fazla sekiz aile listeler. Yalnızca o sayfanın yeni bir ziyaretçiye gösterdiği metni görür: giriş duvarının arkasındaki metinler, otomatik tarayıcıları engelleyen sayfalar ve görsel ya da SVG olarak çizilmiş yazılar okunmaz, bu yüzden fontları listede görünmez.

Evet. Sayfanın görüntülediği her web fontu, Google Fonts'tan, Adobe Fonts'tan ya da sitenin kendi sunucularından gelsin, tespit edilir. Google fontları kendi gerçek görünümleriyle önizlenir; diğerleri bir yedek fontla gösterilir.

Evet, her seferinde bir öğe için. Chrome veya Edge'de metne sağ tıkla, İncele'yi (Inspect) seç ve Computed (Hesaplanan) sekmesini Rendered Fonts bölümüne kadar kaydır; orada gerçekten çizilen font yazar. Firefox'ta Denetçi'deki (Inspector) Yazı tipleri (Fonts) paneli, seçili öğenin fontlarını ve sayfanın yüklediği tüm fontları listeler.

Bu araç yalnızca fontları listeler. Design Extractor'dan bir DESIGN.md ise bir sitenin renklerini, tam yazı ölçeğini, boşluklarını ve bileşen kurallarını, kodlama ajanının izleyebileceği tek bir dosyada toplar.

Daha fazla ücretsiz araç

Tüm ücretsiz araçları gör

Tasarım sisteminin tamamı mı lazım?

Herhangi bir sitenin renklerini, yazı ölçeğini, boşluklarını ve bileşenlerini içeren, kodlama ajanın için hazır bir DESIGN.md al.

DESIGN.md al