Ön Hazırlık ve Gereksinimler

Projenizi başlatmadan önce modern bir React geliştirme ortamına sahip olmalısınız. 2026 yılı standartlarında, Vite tabanlı bir yapı kullanmanızı öneririz. Node.js'in en güncel LTS sürümünün yüklü olduğundan emin olun.

• Node.js (LTS sürümü)
• React 19 veya üzeri
• TypeScript (Tip güvenliği için önerilir)
• Tailwind CSS veya Styled Components (Stil yönetimi için)

Kurulumu yapmak için terminalinizde şu komutu çalıştırarak boş bir proje oluşturabilirsiniz:

npm create vite@latest font-customizer -- --template react-ts

Bu komut, hızlı ve optimize edilmiş bir React geliştirme ortamı kurar. Ardından bağımlılıkları yüklemek için npm install komutunu kullanın.

Adım 1: Yazı Tipi Durumunu (State) Yönetme

Dinamik bir özelleştirici için en önemli nokta, kullanıcı tercihlerini tutacak merkezi bir durum yönetimidir. React'in useState ve useContext kancalarını kullanarak bu veriyi tüm uygulama genelinde erişilebilir kılacağız.

import { createContext, useState, useContext } from 'react';

const FontContext = createContext();

export const FontProvider = ({ children }) => {
  const [fontSize, setFontSize] = useState(16);
  const [fontFamily, setFontFamily] = useState('sans-serif');

  return (
    
      {children}
    
  );
};

Yukarıdaki kod, uygulama genelinde yazı tipi ayarlarını paylaşmamızı sağlayan bir "Provider" yapısı oluşturur. fontSize başlangıç değeri olarak 16px piksel birimini baz alıyoruz.

Adım 2: Özelleştirici Bileşenini Oluşturma

Kullanıcının tercih yapabileceği arayüz bileşenini oluştururken, erişilebilirlik (A11y) standartlarına dikkat etmeliyiz. Bir select elemanı ve bir range slider kullanarak kullanıcıya kolay bir deneyim sunacağız.

const FontControls = () => {
  const { fontSize, setFontSize, fontFamily, setFontFamily } = useContext(FontContext);

  return (
    

      Yazı Boyutu: {fontSize}px
       setFontSize(Number(e.target.value))} 
      />
       setFontFamily(e.target.value)} value={fontFamily}>
        Sans Serif
        Serif
        Monospace
      
    
  );
};

Bu bileşen, kullanıcının yaptığı değişiklikleri FontContext üzerinden günceller. onChange olayları, her etkileşimde state'i tetikleyerek uygulamanın anlık güncellenmesini sağlar.

Adım 3: CSS Değişkenleri ile Dinamik Stil Uygulama

React bileşenlerinde inline stiller yerine CSS değişkenleri kullanmak, performans ve bakım kolaylığı açısından daha verimlidir. Kök elemente (root) uygulanan değişkenler, tüm alt bileşenler tarafından otomatik olarak algılanır.

const App = () => {
  const { fontSize, fontFamily } = useContext(FontContext);

  return (
    

      

        Örnek Başlık
      
    
  );
};

Bu yaklaşım, CSS'in doğal yeteneklerini kullanarak React state'ini DOM stilleriyle senkronize etmemize olanak tanır. var(--font-size) kullanımı, stilin dinamik olarak güncellenmesini sağlar.

Adım 4: Tercihleri Kalıcı Hale Getirme (LocalStorage)

Kullanıcı sayfayı yenilediğinde ayarların sıfırlanmaması için localStorage (tarayıcı yerel depolama) kullanmalıyız. Bu, kullanıcı deneyimini kesintisiz kılan bir "persistence" yani kalıcılık yöntemidir.

useEffect(() => {
  const savedSize = localStorage.getItem('fontSize');
  if (savedSize) setFontSize(Number(savedSize));
}, []);

useEffect(() => {
  localStorage.setItem('fontSize', fontSize);
}, [fontSize]);

useEffect kancası, bileşen yüklendiğinde veriyi çeker ve her değişimde günceller. Bu sayede kullanıcı bir sonraki ziyaretinde tercih ettiği ayarları hazır bulur.

Yöntemlerin Karşılaştırılması

Güvenlik Uyarısı: Kullanıcıdan gelen yazı tipi isimlerini doğrudan CSS içerisine enjekte ederken, XSS (Cross-Site Scripting) saldırılarına karşı giriş verilerini mutlaka doğrulayın. Sadece izin verilen (whitelist) yazı tipi listesini kullanın.

Sıkça Sorulan Sorular

Dinamik yazı tipi değişimi sayfa performansını etkiler mi?

Doğru uygulandığında (CSS değişkenleri ile), performans etkisi ihmal edilebilir düzeydedir. Ancak, her değişimde tüm sayfayı yeniden render eden ağır işlemlerden kaçınmalısınız.

Neden Context API kullanmalıyım?

Context API, "prop drilling" (veriyi alt bileşenlere tek tek aktarma) sorununu çözerek, yazı tipi ayarlarının uygulamanın her yerinden erişilebilir olmasını sağlar.

LocalStorage kullanmak güvenli midir?

LocalStorage, hassas olmayan kullanıcı tercihleri için güvenlidir. Ancak asla şifre veya kişisel tanımlayıcı bilgiler saklamayın.

Google Fonts ile nasıl entegre ederim?

Seçilen yazı tipini document.head içerisine dinamik bir link etiketi ekleyerek veya WebFontLoader kütüphanesini kullanarak yükleyebilirsiniz.

Mobil cihazlarda yazı tipi boyutu nasıl optimize edilir?

Slider aralığını mobil cihazlarda 14px-24px arası kısıtlayarak okunabilirliği koruyabilirsiniz.

İleri Seviye İpuçları: Yazı Tipi Ölçeklendirme Stratejileri

Dinamik yazı tipi özelleştiricinizin kullanıcı deneyimini bir üst seviyeye taşımak için sadece font-size değerini değiştirmek yeterli olmayabilir. Profesyonel arayüzlerde, tipografik hiyerarşiyi korumak adına Fluid Typography (akışkan tipografi) yöntemini CSS değişkenleri ile birleştirebilirsiniz.

Kullanıcı yazı tipi boyutunu artırdığında, satır yüksekliği (line-height) ve harf aralığı (letter-spacing) gibi değerlerin de orantılı olarak değişmesi gerekir. Aşağıdaki örnekte, React state'i ile bu değerleri nasıl senkronize edebileceğinizi görebilirsiniz:

const [fontSize, setFontSize] = useState(16);

// Satır yüksekliğini yazı tipine göre dinamik hesaplama
const lineHeight = fontSize * 1.5;

const dynamicStyles = {
  '--base-font-size': `${fontSize}px`,
  '--line-height': `${lineHeight}px`
};

// Uygulama sarmalayıcısında kullanımı:

  

    İçerik metni burada yer alır.
  

Performans Optimizasyonu ve Render Yönetimi

Dinamik özelleştiricilerde en sık karşılaşılan sorun, her slider hareketinde tüm uygulamanın yeniden render edilmesidir. Özellikle büyük ölçekli projelerde bu durum "input lag" (giriş gecikmesi) sorununa yol açabilir. Bu sorunu çözmek için useDeferredValue veya debounce tekniklerini kullanmalısınız.

Aşağıdaki tablo, performans iyileştirmesi için kullanabileceğiniz stratejileri özetlemektedir:

Özellikle localStorage işlemlerini her onChange tetikleyicisinde çalıştırmak yerine, kullanıcı slider'ı bıraktığında (onMouseUp veya onBlur) tetiklemek, disk I/O işlemlerini minimize ederek uygulamanızın daha akıcı çalışmasını sağlar.

Hata Ayıklama ve Erişilebilirlik Testleri

Yazı tipi özelleştiricinizin erişilebilirliğini doğrulamak için şu adımları izlemelisiniz:

• Kontrast Kontrolü: Kullanıcı yazı tipini büyüttüğünde veya değiştirdiğinde, arka plan ile metin arasındaki kontrast oranının WCAG standartlarına (en az 4.5:1) uygun kaldığından emin olun.
• Klavye Erişimi: Slider bileşeninizin sadece fare ile değil, Tab tuşu ve ok tuşları ile de kontrol edilebildiğini test edin.
• Tarayıcı Araçları: Chrome DevTools "Rendering" sekmesinden "Layout Shift" (CLS) değerlerini izleyerek, yazı tipi değişiminin sayfa düzenini bozup bozmadığını kontrol edin.

İpucu: Eğer uygulamanızda çok sayıda yazı tipi değişikliği yapılıyorsa, font-display: swap; CSS kuralını kullanarak yazı tiplerinin yüklenme süresince metnin görünmez kalmasını engelleyebilirsiniz.

Sonuç

React ile dinamik bir yazı tipi özelleştirici oluşturmak, hem kullanıcı deneyimini zenginleştirir hem de uygulamanızın erişilebilirlik puanını artırır. Bu rehberde öğrendiğiniz state yönetimi, CSS değişkenleri ve kalıcılık teknikleri, diğer arayüz özelleştirmeleri için de temel oluşturacaktır. Bir sonraki adım olarak, bu sisteme "Karanlık Mod" (Dark Mode) desteği ekleyerek kullanıcılarınıza tam kapsamlı bir tema yönetimi sunabilirsiniz.

Sorumluluk Reddi: Bu makaledeki kod örnekleri eğitim amaçlıdır. Üretim ortamına almadan önce güvenlik testlerini yapmanız ve kodunuzu güncel kütüphane sürümleriyle uyumlu hale getirmeniz önerilir.