React İle Web Uygulamaları İçin Dinamik Bir Yazı Tipi Özelleştirici Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Projenize başlamadan önce bilgisayarınızda Node.js sürüm 20 veya üzeri bir ortamın kurulu olması gerekmektedir. Proje iskeletini oluşturmak için Vite kullanacağız; çünkü Vite, günümüz React projeleri için en hızlı ve optimize edilmiş geliştirme ortamını sunmaktadır.

• Node.js (LTS sürümü önerilir)
• React 19 veya üzeri
• Temel CSS veya Tailwind CSS bilgisi
• Modern bir kod editörü (VS Code gibi)

Projenizi başlatmak için terminalinizde şu komutları çalıştırarak gerekli kurulumları yapabilirsiniz:

npm create vite@latest font-customizer -- --template react
cd font-customizer
npm install
npm run dev

Bu komutlar, projenizin temel dizin yapısını oluşturacak ve geliştirme sunucusunu ayağa kaldıracaktır. Artık kodlamaya başlamaya hazırsınız.

Adım Adım Yazı Tipi Durum Yönetimi (State Management)

React'te dinamik bir özelleştirici yapmanın kalbi useState hook'udur. Kullanıcının seçtiği değerleri tutacak merkezi bir durum yönetimi oluşturmalıyız. Bu değerler, uygulamanın genelinde veya belirli bir kapsayıcıda (container) CSS değişkenleri olarak kullanılacaktır.

import { useState } from 'react';

const useFontSettings = () => {
  const [fontSize, setFontSize] = useState(16);
  const [fontFamily, setFontFamily] = useState('sans-serif');
  const [fontWeight, setFontWeight] = useState(400);

  return { fontSize, setFontSize, fontFamily, setFontFamily, fontWeight, setFontWeight };
};

Yukarıdaki kod, özelleştirme verilerini tutan özel bir hook (custom hook) örneğidir. Bu yaklaşım, mantığı bileşenlerden ayırarak daha temiz bir kod yapısı sunar.

CSS Değişkenleri ile Dinamik Stil Uygulama

React bileşenlerinde doğrudan stil atamak yerine CSS değişkenlerini kullanmak çok daha performanslıdır. Çünkü her değişiklikte tüm DOM ağacını yeniden render etmek yerine, sadece kök (root) elementin değişkenlerini güncellemek yeterli olacaktır.

const App = () => {
  const { fontSize, fontFamily, fontWeight } = useFontSettings();

  const dynamicStyles = {
    '--user-font-size': `${fontSize}px`,
    '--user-font-family': fontFamily,
    '--user-font-weight': fontWeight,
  };

  return (
    

      


Özelleştirilebilir İçerik
    
  );
};

Bu yöntem, CSS tarafında var(--user-font-size) şeklinde tanımlanan değerlerin, React'ten gelen güncellemelerle anlık olarak değişmesini sağlar.

Kullanıcı Arayüzü İçin Kontrol Paneli Oluşturma

Kullanıcıların yazı tipini değiştirebilmesi için bir kontrol paneli oluşturmamız gerekiyor. Bu panelde input (girdi) elemanlarını kullanarak durumları güncelleyeceğiz. Güvenlik ve performans için girdi doğrulaması yapmak önemlidir.

const FontControls = ({ onSizeChange, onFamilyChange }) => {
  return (
    

      Yazı Boyutu:
         onSizeChange(Number(e.target.value))} />
      
       onFamilyChange(e.target.value)}>
        Sans Serif
        Serif
        Monospace
      
    
  );
};

Bu bileşen, kullanıcının girdiği değerleri ana bileşene ileterek durumun güncellenmesini sağlar. Number() dönüşümü, tip güvenliğini sağlamak için kritiktir.

Dinamik Yazı Tipi Özelleştirme Yöntemleri Karşılaştırması

Aşağıdaki tablo, yazı tipi özelleştirme için kullanılan farklı yaklaşımların avantaj ve dezavantajlarını özetlemektedir.

Kritik Güvenlik ve Performans Uyarıları

Güvenlik Uyarısı: Kullanıcıdan alınan değerleri doğrudan HTML'e veya stil etiketlerine enjekte ederken XSS (Cross-Site Scripting) saldırılarına karşı dikkatli olun. Eğer yazı tipi ismi gibi değerleri bir API'den veya kullanıcı girdisinden alıyorsanız, mutlaka beyaz liste (whitelist) kontrolü yapın ve girdileri sanitize edin.

Performans tarafında ise, her tuş vuruşunda render işlemini tetiklemek yerine debounce (gecikmeli işlem) tekniğini kullanarak, kullanıcının yazma işlemi bittikten sonra stil güncellemesi yapmasını sağlayabilirsiniz.

Sıkça Sorulan Sorular

Dinamik yazı tipi ayarlarını nasıl kalıcı hale getirebilirim?

Seçilen ayarları localStorage kullanarak tarayıcı hafızasına kaydedebilir ve sayfa yenilendiğinde useEffect hook'u ile tekrar yükleyebilirsiniz.

Farklı ekran boyutlarında yazı tipi nasıl ölçeklenir?

CSS'te clamp() fonksiyonunu kullanarak yazı tipinin minimum ve maksimum değerler arasında otomatik ölçeklenmesini sağlayabilirsiniz.

Google Fonts gibi dış kaynakları nasıl dinamik yüklerim?

WebFontLoader kütüphanesini kullanarak, seçilen yazı tipini çalışma zamanında (runtime) dinamik olarak dokümana ekleyebilirsiniz.

Bu yöntem SEO'yu etkiler mi?

Doğru uygulandığında etkilemez. Ancak, yazı tipi yüklenirken "Flash of Unstyled Text" (FOUT) yaşanmaması için yazı tipi yükleme stratejilerini (font-display: swap) doğru yapılandırmalısınız.

Performans kaybını nasıl önlerim?

Gereksiz render işlemlerini engellemek için React.memo veya useCallback kullanarak bileşenlerinizi optimize edin.

İleri Seviye İpuçları: Yazı Tipi Ölçeklendirme ve Tipografik Hiyerarşi

Dinamik bir özelleştirici oluştururken, sadece yazı tipi ailesini değil, aynı zamanda satır yüksekliği (line-height) ve harf aralığı (letter-spacing) gibi değerleri de kullanıcıya bırakmak, erişilebilirlik açısından büyük bir fark yaratır. Bu değerleri birbirine bağlı (responsive) bir yapıda tutmak için clamp() fonksiyonu ile CSS değişkenlerini birleştirebilirsiniz.

/* CSS Değişkenleri ile Dinamik Ölçekleme */
:root {
  --base-font-size: 16px;
  --line-height: 1.5;
}

body {
  font-size: var(--base-font-size);
  line-height: var(--line-height);
}

/* React tarafında güncelleme */
const updateTypography = (size, spacing) => {
  document.documentElement.style.setProperty('--base-font-size', `${size}px`);
  document.documentElement.style.setProperty('--line-height', spacing);
};

Bu yaklaşım, kullanıcının seçtiği yazı tipi boyutuna göre satır yüksekliğinin otomatik olarak adapte olmasını sağlar. Özellikle görme engelli kullanıcılar için rem birimlerini kullanmak ve temel yazı tipi boyutunu 16px üzerinden ölçeklendirmek, tarayıcı ayarlarıyla tam uyumlu çalışmanıza olanak tanır.

Alternatif Kütüphaneler ve Yazı Tipi Yönetimi

Eğer uygulamanızda çok sayıda yazı tipi varyasyonu kullanıyorsanız veya performans darboğazları yaşıyorsanız, webfontloader gibi kütüphaneler yerine modern tarayıcı API'lerini kullanmak daha verimli olabilir. FontFaceSet API, yazı tiplerinin yüklenme durumunu takip etmenize ve yazı tipi yüklenene kadar "Flash of Unstyled Text" (FOUT) sorununu engellemenize yardımcı olur.

FontFaceSet API Kullanımı

Aşağıdaki örnek, dinamik olarak yüklenen bir yazı tipinin hazır olup olmadığını kontrol ederek kullanıcıya görsel bir geri bildirim sağlar:

const loadCustomFont = async (fontName, fontUrl) => {
  const font = new FontFace(fontName, `url(${fontUrl})`);
  
  try {
    const loadedFont = await font.load();
    document.fonts.add(loadedFont);
    console.log(`${fontName} başarıyla yüklendi.`);
  } catch (error) {
    console.error("Yazı tipi yüklenirken hata oluştu:", error);
  }
};

Bu yöntem, özellikle büyük boyutlu özel yazı tipi dosyalarını (WOFF2) yönetirken, uygulamanın ana iş parçacığını (main thread) bloke etmeden arka planda yükleme yapmanıza olanak tanır. Ayrıca, font-display: swap CSS kuralını kullanarak yazı tipi yüklenene kadar sistem yazı tiplerinin gösterilmesini sağlayarak Kullanıcı Deneyimini (UX) iyileştirebilirsiniz.

Performans ve Optimizasyon Tablosu

Uygulamanızın ölçeği arttıkça, yazı tipi dosyalarını subset (alt küme) haline getirerek sadece ihtiyaç duyulan karakterleri (örneğin sadece Latin karakterleri) yüklemek, sayfa açılış hızını %40'a varan oranlarda artırabilir.

Sonuç

React ile dinamik bir yazı tipi özelleştirici oluşturmak, sadece teknik bir uygulama değil, aynı zamanda kullanıcı merkezli tasarımın bir parçasıdır. Bu rehberde öğrendiğiniz durum yönetimi, CSS değişkenleri ve bileşen mimarisi, daha karmaşık arayüz özelleştirme projeleri için temel oluşturacaktır. Bir sonraki adım olarak, bu özelleştirme ayarlarını bir veritabanına kaydederek kullanıcıların farklı cihazlarda aynı deneyimi yaşamasını sağlayacak bir backend entegrasyonu üzerinde çalışabilirsiniz.

Sorumluluk Reddi: Bu makaledeki kod örnekleri eğitim amaçlıdır. Üretim ortamında kullanmadan önce güvenlik açıklarını taramanız ve güncel kütüphane sürümlerini takip etmeniz önerilir.