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 modern bir React ortamına ihtiyacımız var. 2026 yılı standartlarında, fonksiyonel bileşenler ve "Hooks" yapısı ile çalışacağız. Projenizi başlatmak için aşağıdaki araçların yüklü olduğundan emin olun:

• Node.js (LTS sürümü veya üzeri)
• Vite (Hızlı geliştirme ortamı için önerilir)
• React 19+ (Concurrent mode ve gelişmiş state güncellemeleri için)
• Temel CSS veya Tailwind CSS bilgisi

Projenizi oluşturmak için terminalinizde npm create vite@latest font-customizer -- --template react komutunu çalıştırarak temel dizin yapısını kurabilirsiniz.

Adım 1: Yazı Tipi Durumunu Yönetmek İçin State Kurulumu

Dinamik bir özelleştirici için ilk adım, yazı tipi özelliklerini bir "state" (durum) nesnesi içerisinde tutmaktır. Bu, uygulamanın farklı bölümlerinin aynı yazı tipi ayarlarını kullanmasını sağlar.

import { useState } from 'react';

const useFontSettings = () => {
  const [fontConfig, setFontConfig] = useState({
    fontSize: 16,
    fontFamily: 'Arial',
    fontWeight: 400,
  });

  return { fontConfig, setFontConfig };
};

Yukarıdaki kod bloğu, yazı tipi ayarlarını merkezi bir noktadan yönetmemizi sağlayan özel bir "Custom Hook" yapısıdır. Bu yaklaşım, kodun tekrar kullanılabilirliğini artırır ve bileşenler arası veri taşımayı kolaylaştırır.

Adım 2: Kontrol Paneli Bileşenini Oluşturma

Kullanıcının yazı tipi tercihlerini değiştirebileceği bir arayüz oluşturmalıyız. Bu bileşen, state güncellemelerini tetikleyen input elemanlarını içerecektir.

const FontControls = ({ config, setConfig }) => {
  const handleChange = (e) => {
    const { name, value } = e.target;
    setConfig(prev => ({ ...prev, [name]: value }));
  };

  return (
    

      
      
        Arial
        Roboto
      
    
  );
};

Bu bileşen, name özelliğini kullanarak dinamik bir güncelleme yapar. Bu sayede her input için ayrı bir fonksiyon yazmak yerine, tek bir handleChange fonksiyonu ile tüm durumu yönetebiliriz.

Adım 3: Stilleri DOM Elemanlarına Uygulama

State içerisindeki verileri, React'in style prop'u aracılığıyla hedef bileşenlere uygulamamız gerekir. Bu işlem, CSS değişkenleri (CSS Variables) ile birleştirildiğinde çok daha performanslı çalışır.

const DynamicText = ({ config, children }) => {
  const style = {
    fontSize: `${config.fontSize}px`,
    fontFamily: config.fontFamily,
    fontWeight: config.fontWeight,
    transition: 'all 0.3s ease'
  };

  return 
{children}
;
};

Burada transition özelliğini ekleyerek, yazı tipi değişikliklerinin kullanıcıya ani bir sıçrama gibi değil, yumuşak bir geçişle sunulmasını sağladık. Bu, kullanıcı deneyimi açısından oldukça önemlidir.

Adım 4: Performans ve Güvenlik Uyarıları

Dinamik stil uygulamalarında en büyük risk, kullanıcıdan gelen verinin doğrudan DOM'a enjekte edilmesidir. React, varsayılan olarak XSS (Cross-Site Scripting) saldırılarına karşı koruma sağlar, ancak yine de dikkatli olunmalıdır.

Güvenlik Uyarısı: Kullanıcıdan alınan yazı tipi değerlerini doğrudan style objesine atarken, değerlerin beklenen formatta (örneğin sadece sayı veya onaylı yazı tipi isimleri) olduğundan emin olun. Doğrulanmamış string değerlerini CSS özelliklerine doğrudan atamak, CSS injection riskleri doğurabilir.

Yöntem Karşılaştırması

Adım 5: Kalıcı Depolama (LocalStorage) Entegrasyonu

Kullanıcı sayfayı yenilediğinde yazı tipi tercihlerinin kaybolmaması için localStorage kullanmalıyız. Bu, kullanıcı deneyimini kişiselleştiren en önemli özelliklerden biridir.

import { useEffect } from 'react';

// useEffect kullanarak state değişimlerini localStorage'a kaydederiz
useEffect(() => {
  localStorage.setItem('user-font-settings', JSON.stringify(fontConfig));
}, [fontConfig]);

Bu kod, fontConfig her değiştiğinde tarayıcının hafızasına güncel ayarları yazar. Uygulama ilk açıldığında ise useState başlangıç değerini localStorage'dan okuyacak şekilde güncellenmelidir.

Sıkça Sorulan Sorular

React'te yazı tipi boyutu için en iyi birim hangisidir?

Erişilebilirlik ve ölçeklenebilirlik için her zaman rem veya em birimlerini kullanmanızı öneririz. px kullanımı, tarayıcıların varsayılan yazı tipi ayarlarını geçersiz kılarak erişilebilirlik sorunlarına yol açabilir.

Bu yapı mobil cihazlarda nasıl çalışır?

Dinamik stil yönetimi, CSS'in @media sorguları ile birleştirildiğinde mobil cihazlarda da mükemmel çalışır. State içindeki değerleri sadece font boyutu için değil, responsive tasarımın diğer parametreleri için de kullanabilirsiniz.

Performans kaybı yaşar mıyım?

React'in sanal DOM yapısı, sadece değişen stil özelliklerini güncellediği için bu yöntem oldukça performanslıdır. Çok fazla bileşen üzerinde aynı anda değişiklik yapıyorsanız useMemo veya useCallback kullanarak gereksiz render işlemlerini engelleyebilirsiniz.

CSS değişkenleri ile React state'ini nasıl bağlarım?

En temiz yöntem, ana kapsayıcıya (root element) style={{ '--custom-font': config.fontFamily }} şeklinde bir CSS değişkeni atamak ve alt bileşenlerde font-family: var(--custom-font) kullanmaktır.

Yazı tipi yükleme hatası alırsam ne yapmalıyım?

Google Fonts gibi harici kaynaklar kullanıyorsanız, yazı tipinin tarayıcı tarafından yüklendiğinden emin olun. font-display: swap özelliğini CSS'inizde kullanarak yazı tipi yüklenene kadar sistem fontlarının görünmesini sağlayabilirsiniz.

İleri Düzey İpucu: Google Fonts ile Dinamik Yükleme Stratejisi

Uygulamanızda kullanıcıya çok sayıda yazı tipi seçeneği sunuyorsanız, tüm fontları başlangıçta yüklemek performans sorunlarına yol açabilir. Bunun yerine, kullanıcı bir yazı tipi seçtiğinde ilgili fontu dinamik olarak WebFontLoader gibi bir kütüphane ile veya doğrudan document.head içerisine link etiketi enjekte ederek yükleyebilirsiniz.

const loadFont = (fontName) => {
  const link = document.createElement('link');
  link.href = `https://fonts.googleapis.com/css2?family=${fontName.replace(' ', '+')}&display=swap`;
  link.rel = 'stylesheet';
  document.head.appendChild(link);
};

// Kullanım örneği
const handleFontChange = (newFont) => {
  setFontFamily(newFont);
  loadFont(newFont);
};

Bu yaklaşım, uygulamanızın ilk açılış hızını (Lighthouse skorlarını) ciddi oranda iyileştirir ve sadece ihtiyaç duyulan kaynağın indirilmesini sağlar.

Test Süreçleri: Yazı Tipi Değişimini Doğrulama

Dinamik stil değişiklikleri, özellikle karmaşık arayüzlerde beklenmedik düzen bozulmalarına (layout shift) neden olabilir. Bu durumu yönetmek için Jest ve React Testing Library kullanarak birim testleri yazmalısınız. Kullanıcının yazı tipi seçiminin DOM'a doğru yansıyıp yansımadığını şu şekilde test edebilirsiniz:

import { render, screen, fireEvent } from '@testing-library/react';
import FontCustomizer from './FontCustomizer';

test('yazi tipi secildiginde body stili guncelleniyor mu', () => {
  render();
  const select = screen.getByRole('combobox');
  
  fireEvent.change(select, { target: { value: 'Roboto' } });
  
  expect(document.body.style.fontFamily).toContain('Roboto');
});

Ayrıca, Cypress veya Playwright gibi E2E (uçtan uca) test araçları ile yazı tipi değişiminin farklı ekran çözünürlüklerinde metin taşmalarına yol açıp açmadığını görsel regresyon testleri ile doğrulamanız önerilir.

Yaygın Hata Ayıklama (Debugging) İpuçları

• CSS Öncelik Sorunları: Eğer !important kullanmak zorunda kalıyorsanız, CSS seçicilerinizin özgüllük (specificity) değerini kontrol edin.
• FOUC (Flash of Unstyled Content): Yazı tipi yüklenirken oluşan titremeyi engellemek için font-display: swap özelliğinin @font-face tanımlarında olduğundan emin olun.
• State Senkronizasyonu: localStorage ile useState arasındaki veri tutarsızlıklarını engellemek için useEffect içerisinde bir "isMounted" kontrolü ekleyin.

Sonuç

React ile dinamik bir yazı tipi özelleştirici oluşturmak, hem teknik becerilerinizi geliştiren hem de kullanıcılarınızın erişilebilirlik deneyimini artıran bir süreçtir. Bu rehberde, state yönetiminden localStorage entegrasyonuna kadar temel adımları tamamladık. Bir sonraki adım olarak, bu yapıya "Karanlık Mod" (Dark Mode) desteği ekleyerek uygulamanızı daha kapsamlı bir tema yöneticisine dönüştürebilirsiniz.

Sorumluluk Reddi: Bu makalede paylaşılan kod örnekleri eğitim amaçlıdır. Üretim ortamında (production) kullanmadan önce, özellikle kullanıcı girdilerini doğrulama (sanitization) süreçlerini projenizin güvenlik standartlarına göre gözden geçiriniz.