Skip to main content
FreeToolkit .ai

Google Yazı Tipleri Ön İzleme Özelleştirilebilir metin, boyut, ağırlık ve harf aralığı ile Google Yazı Tiplerini ön izleyin.

Google Yazı Tipleri Ön İzleme illustration
🎨

Google Yazı Tipleri Ön İzleme

Özelleştirilebilir metin, boyut, ağırlık ve harf aralığı ile Google Yazı Tiplerini ön izleyin.

1

Yazı Tiplerini Gözden Geçirin veya Arayın

30 popüler Google Yazı Tipi arasından arayabilir veya tam listeyi gözden geçirebilirsiniz.

2

Ön İzlemeyi Özelleştirin

Örnek metni, yazı tipi boyutunu, ağırlığını, harf aralığını ve satır yüksekliğini ayarlayın.

3

CSS'yi Kopyalayın

Yazı tipini farklı ağırlıklarda ön izleyin ve @import ile CSS kodunu kopyalayın.

Loading tool...

What Is Google Yazı Tipleri Ön İzleme?

Google Fonts Ön İzleme aracı, tam tipografi kontrolleri ile popüler Google Yazı Tiplerini keşfetmenize ve ön izlemenize olanak tanır. Google Fonts, web için optimize edilmiş yüzlerce ücretsiz ve açık kaynaklı yazı tipi sunar. Bu araç, aranabilir adlara sahip en popüler 30 seçeneği içerir. Her yazı tipi için özel örnek metin ile ön izleme yapabilir ve yazıtipi boyutu, ağırlık (100-900), harf aralığı ve satır yüksekliğini ayarlayabilirsiniz. Çoklu ağırlıklı bir ön izleme, yazı tipini farklı ağırlıklarda yan yana gösterir ve esnekliğini değerlendirmenize yardımcı olur. Oluşturulan CSS, Google Fonts @import URL'sini ve boyut, ağırlık, aralık ve satır yüksekliği özellikleriyle birlikte font-family bildirimini içerir. Bu araç, yazı tiplerini bir projeye taahhüt etmeden önce değerlendirmek için zorunludur.

Why Use Google Yazı Tipleri Ön İzleme?

  • Arama filtrelemesine sahip 30 popüler Google Yazı Tipi
  • Tam yazı tipli kontroller: boyut, ağırlık, aralık, satır yüksekliği
  • Çoklu ağırlık ön izleme, yazı tipinin esnekliğini bir bakışta gösterir
  • @import URL ve deyimlerle birlikte tam CSS çıktısı

Common Use Cases

Yazı Tipi Seçimi

Web projesi için yazı tiplerini değerlendirin ve karşılaştırın.

Yazı Tipli Testleri

Tasarım maketlerinde belirli boyutlarda ve ağırlıklarda yazı tiplerini test edin.

Marka Yazı Tipi Keşfi

Marka kimliği ve pazarlama materyalleri için yazı tipi seçeneklerini keşfedin.

Geliştirici Referansı

Geliştirme sırasında hızlı bir şekilde yazı tiplerini ön izleyin ve CSS kodunu alın.

Technical Guide

Google Fonts, otomatik format seçimi (modern tarayıcılar için woff2) ile bir CDN aracılığıyla yazı tipi dosyalarını sunar. @import yöntemi, CSS aracılığıyla yazı tiplerini ekler: @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap'); Aile parametresi, yazı tipini ve ağırlıkları belirtir. display=swap parametresi, web yazıtipi yüklenirken bir yedek yazı tipiyle birlikte anında metin görünümü için font-display: swap kullanır. Birden fazla yazı tipi, &family= parametreleri ile ayrılır. Performans için yalnızca ihtiyacınız olan ağırlıkları isteyin. Değişken yazı tipleri (çoğu Google Fonts için kullanılabilir), wght@100..900 sözdizimi kullanarak tek bir dosyada tüm ağırlıkları sağlar. Yazı tipi alt kümesi, yalnızca gerekli karakter aralıklarını yükleyerek dosya boyutunu daha da azaltabilir: &text=Hello veya subset=latin parametreleri. Yedek yazı tipleriyle birlikte font-family özelliğini kullanın: font-family: 'Inter', system-ui, sans-serif.

Tips & Best Practices

  • 1
    Daha iyi performans için yalnızca kullandığınız yazı tipi ağırlıklarını isteyin
  • 2
    Yazı tiplerinin yüklenmesi sırasında görünmez metinleri önlemek için font-display: swap kullanın
  • 3
    Yazı tiplerini sadece Lorem Ipsum ile değil, gerçek içeriğinizle test edin
  • 4
    Maksimum ağırlık esnekliği için tek bir dosyada değişken yazı tipleri düşünün

Related Tools

CSS Renk Geçişi Metni - free online tool

CSS Renk Geçişi Metni

CSS background-clip ve text-fill-color kullanarak renk geçişi efektli metin oluşturun.

🎨 CSS & Design
Tailwind Yapılandırma Oluşturucu - free online tool

Tailwind Yapılandırma Oluşturucu

Özel renkler, yazı tipleri ve kırılma noktaları ile Tailwind CSS yapılandırma dosyalarını oluşturun.

🎨 CSS & Design
Tipografi Ölçeği Oluşturucu - free online tool

Tipografi Ölçeği Oluşturucu

Özelleştirilebilir temel boyut, oran ve birimlerle modüler bir tipografik ölçek oluşturun.

🎨 CSS & Design
CSS Değişken Oluşturucu - free online tool

CSS Değişken Oluşturucu

Renkler, boşluklar ve tipografi için özel CSS özelliklerini (değişkenleri) oluşturun.

🎨 CSS & Design

Frequently Asked Questions

Q Google Yazı Tipleri ücretsiz mi?
Evet, tüm Google Yazı Tipleri kişisel ve ticari kullanım için ücretsiz ve açık kaynaklıdır.
Q Google Yazı Tiplerini projeme nasıl eklerim?
CSS'de @import yöntemini kullanın veya HTML'nizde bir <link> etiketi ekleyin. Bu aracıdan oluşturulan kodu kopyalayın.
Q Google Yazı Tipleri sayfa hızını etkiler mi?
Her yazı tipi indirme süresine ekler. Etkiyi en aza indirmek için yazı tipi ağırlıklarını sınırlayın ve font-display: swap kullanın.
Q Font-display: swap nedir?
Yazı tipleri yüklenene kadar bir yedek yazı tipiyle metni hemen gösterir, ardından web yazı tipine geçer ve görünmez metinleri önler.
Q Google Yazı Tiplerini kendim barındırabilir miyim?
Evet, yazı tipi dosyalarını fonts.google.com'dan indirin ve kendi sunucunuzdan servis edin. Böylece GDPR uyumluluğu ve daha hızlı yüklenme sağlarsınız.

About This Tool

Google Yazı Tipleri Ön İzleme is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.