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

Gereksinimler ve Ön Hazırlık

Uygulamamızı geliştirmek için güncel bir React ortamına ihtiyacımız var. 2026 yılı standartlarında, Vite kullanarak hızlı bir başlangıç yapmanızı öneririm. Projenizde TypeScript kullanmanız, tip güvenliği açısından büyük avantaj sağlayacaktır.

• Node.js (LTS sürümü)
• React 19 veya üzeri
• Vite (Modüler yapı için)
• Temel CSS veya Tailwind CSS bilgisi

Öncelikle terminalinizde npm create vite@latest font-customizer -- --template react-ts komutunu çalıştırarak projenizi oluşturun ve gerekli bağımlılıkları yükleyin. Ardından, stil tanımlamalarımızı kolaylaştırmak için kök dizindeki index.css dosyamızı hazırlayalım.

CSS Değişkenleri ile Dinamik Stil Altyapısı

React bileşenlerinden stilleri doğrudan değiştirmek yerine, CSS değişkenlerini (Custom Properties) kullanmak en performanslı yöntemdir. Bu sayede React yalnızca değişkenin değerini günceller, tarayıcı ise boyama (repaint) işlemini optimize eder.

:root {
  --main-font-size: 16px;
  --main-font-family: 'sans-serif';
  --main-font-weight: 400;
}

body {
  font-size: var(--main-font-size);
  font-family: var(--main-font-family);
  font-weight: var(--main-font-weight);
  transition: all 0.2s ease-in-out;
}

Yukarıdaki kod, uygulamanın genelinde kullanılacak olan değişkenleri tanımlar. React tarafında bu değişkenleri document.documentElement.style.setProperty metodu ile güncelleyeceğiz.

React State Yönetimi ile Özelleştirici Bileşeni

Şimdi, kullanıcının tercihlerini tutacak bir FontCustomizer bileşeni oluşturalım. Bu bileşen, yazı tipi ayarlarını yönetmek için useState kancasını kullanacak.

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    document.documentElement.style.setProperty('--main-font-size', `${fontSize}px`);
    document.documentElement.style.setProperty('--main-font-family', fontFamily);
  }, [fontSize, fontFamily]);

  return (
    

       setFontSize(Number(e.target.value))} 
      />
       setFontFamily(e.target.value)}>
        Sans Serif
        Serif
        Monospace
      
    
  );
};

Bu kod bloğu, kullanıcı arayüzündeki değişiklikleri yakalar ve useEffect yardımıyla DOM üzerindeki CSS değişkenlerini anlık olarak günceller. useEffect bağımlılık dizisi sayesinde, her değişiklikte stil otomatik olarak tetiklenir.

Kalıcı Tercihler İçin LocalStorage Kullanımı

Kullanıcı sayfayı yenilediğinde ayarlarının kaybolmaması için localStorage API'sini kullanmalıyız. Bu, kullanıcı deneyimi açısından kritik bir adımdır.

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

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

Bu yöntem, kullanıcının bir sonraki ziyaretinde tercih ettiği yazı tipi ayarlarının yüklenmesini sağlar. Güvenlik notu: localStorage verileri kullanıcı tarafında tutulur, bu nedenle hassas veriler için kullanılmamalıdır.

Yöntem Karşılaştırma Tablosu

Güvenlik Uyarısı: Kullanıcıdan alınan verileri (örneğin özel bir yazı tipi ismi) doğrudan DOM'a enjekte ederken XSS (Cross-Site Scripting) riskine karşı dikkatli olun. Kullanıcı girdilerini her zaman beyaz liste (whitelist) ile doğrulayın.

Sıkça Sorulan Sorular

Dinamik yazı tipi değişimi SEO'yu etkiler mi?

Doğrudan bir etkisi yoktur. Ancak, yazı tipi yüklemeleri sırasında "Flash of Unstyled Text" (FOUT) yaşanmaması için yazı tipi yükleme stratejilerinizi (font-display: swap) doğru yapılandırmalısınız.

Birden fazla bileşende bu ayarları nasıl paylaşırım?

React Context API kullanarak font ayarlarını tüm uygulamaya yayabilir, böylece her bileşenin aynı ayarlara erişmesini sağlayabilirsiniz.

Performans kaybı yaşanır mı?

CSS değişkenleri tarayıcı tarafından oldukça verimli işlenir. useEffect içinde çok sık DOM güncellemesi yapmadığınız sürece gözle görülür bir performans kaybı yaşanmaz.

Mobil cihazlarda nasıl bir yaklaşım izlenmeli?

Mobil cihazlarda range input yerine butonlar veya daha dokunmatik dostu menüler tercih edilmelidir.

Google Fonts entegrasyonu nasıl yapılır?

Seçilen yazı tipini WebFontLoader gibi kütüphanelerle dinamik olarak yükleyebilir veya Google Fonts API'sini kullanarak font ailelerini dinamik olarak CSS değişkenine atayabilirsiniz.

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

Dinamik yazı tipi özelleştiriciyi bir adım öteye taşımak için sadece font ailesini değil, aynı zamanda satır yüksekliği (line-height) ve harf aralığı (letter-spacing) gibi değerleri de kullanıcı kontrolüne bırakabilirsiniz. Bu, özellikle görme bozukluğu olan kullanıcılar için erişilebilirlik (A11y) standartlarını en üst seviyeye çıkarır.

Aşağıdaki örnekte, kullanıcının metin yoğunluğunu ayarlayabileceği bir yapı kurguluyoruz:

const [typography, setTypography] = useState({
  fontSize: 16,
  lineHeight: 1.5,
  letterSpacing: 0
});

const updateStyles = (newStyles) => {
  const root = document.documentElement;
  root.style.setProperty('--base-font-size', `${newStyles.fontSize}px`);
  root.style.setProperty('--line-height', newStyles.lineHeight);
  root.style.setProperty('--letter-spacing', `${newStyles.letterSpacing}px`);
};

Tipografik Ölçeklendirme (Modular Scale)

Dinamik bir sistemde başlıklar (h1, h2, h3) ile gövde metni arasındaki hiyerarşiyi korumak için Modular Scale mantığını kullanmalısınız. Kullanıcı temel font boyutunu değiştirdiğinde, tüm başlıklar orantılı olarak büyümeli veya küçülmelidir.

• Altın Oran: 1.618 çarpanı ile estetik bir hiyerarşi oluşturun.
• Göreceli Birimler: CSS'de rem birimini kullanarak, kök (root) font boyutuna bağlı bir ölçekleme sağlayın.

Hata Ayıklama ve Yaygın Sorun Giderme

Dinamik stil değişiklikleri sırasında karşılaşılan en yaygın sorun, fontların yüklenme süresidir. Kullanıcı bir font seçtiğinde, tarayıcı bu fontu indirmeden önce metni görünmez kılabilir veya varsayılan fontu gösterebilir (FOIT/FOUT). Bunu yönetmek için font-display: swap özelliğini CSS'nizde mutlaka kullanın.

CSS Değişkeni Hatalarını İzleme

Eğer değişkenleriniz güncellenmiyor gibi görünüyorsa, tarayıcı konsolundan "Elements" sekmesine giderek :root seçicisindeki değişkenlerin değişip değişmediğini kontrol edin. Ayrıca, React useEffect kancasının bağımlılık dizisini (dependency array) doğru yapılandırdığınızdan emin olun.

İpucu: Eğer font yükleme hataları alıyorsanız, document.fonts.ready API'sini kullanarak fontların tamamen yüklendiğinden emin olduktan sonra arayüzü güncelleyebilirsiniz.

Performans Optimizasyonu

Kullanıcı her kaydırma (slider) hareketinde DOM'u güncellemek yerine, debounce tekniğini kullanarak performans kaybını engelleyin. Özellikle çok sayıda DOM elemanı içeren sayfalarda, her milisaniyede bir stil güncellemesi yapmak "layout thrashing" sorununa yol açabilir.

import { debounce } from 'lodash';

const handleSizeChange = debounce((value) => {
  document.documentElement.style.setProperty('--base-font-size', `${value}px`);
}, 100);

Bu yaklaşım, kullanıcının etkileşimi bittikten veya yavaşladıktan 100ms sonra stil değişikliğini tetikleyerek tarayıcının yeniden boyama (repaint) yükünü ciddi oranda azaltır.

Sonuç

React ile dinamik bir yazı tipi özelleştirici oluşturmak, hem kullanıcı etkileşimini artırır hem de uygulamanızın erişilebilirlik standartlarını yükseltir. CSS değişkenlerinin gücünü React'in state yönetimi ile birleştirerek, sürdürülebilir ve performanslı bir yapı kurduk. Bir sonraki adım olarak, bu yapıya "Karanlık Mod" (Dark Mode) desteği ekleyerek projenizi daha kapsamlı bir tema yöneticisine dönüştürebilirsiniz.

Sorumluluk Reddi: Bu makaledeki kod örnekleri eğitim amaçlıdır. Üretim ortamında (production) kullanmadan önce gerekli güvenlik testlerini yapmanız ve hata ayıklama (debugging) süreçlerini tamamlamanız önerilir.