Gereksinimler ve Ön Hazırlık

Projeye başlamadan önce bilgisayarınızda güncel bir Node.js sürümünün (v20 veya üzeri önerilir) kurulu olması gerekir. React projenizi oluşturmak için Vite kullanmanızı tavsiye ederiz; çünkü Vite, geliştirme sürecinde hızlı yenileme (HMR) avantajı sağlar.

• Node.js (LTS sürümü)
• React 19 veya üzeri bir sürüm
• Temel düzeyde CSS (özellikle CSS değişkenleri) bilgisi
• Bir kod editörü (VS Code önerilir)

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

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

Bu adımlar, projenizin temel iskeletini oluşturacak ve geliştirme sunucusunu ayağa kaldıracaktır. Artık özelleştirici bileşenlerimizi yazmaya başlayabiliriz.

CSS Değişkenleri ile Stil Yönetimi

Dinamik bir yazı tipi özelleştirici oluştururken, her bir stili doğrudan React bileşenine yazmak yerine CSS değişkenlerini kullanmak en temiz yöntemdir. Bu yöntem, tarayıcı performansını optimize eder ve stilleri yönetmeyi kolaylaştırır. Öncelikle index.css dosyanızda kök (root) tanımlamalarınızı yapmalısınız.

:root {
  --main-font-size: 16px;
  --main-font-family: 'Arial', sans-serif;
  --line-height: 1.5;
}

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

Bu CSS yapısı, JavaScript üzerinden değiştireceğimiz değerlerin tüm uygulamaya anlık yansımasını sağlar. var() fonksiyonu, CSS değişkenlerini çağırmamıza olanak tanır.

React State ile Yazı Tipi Ayarlarını Yönetme

Kullanıcının yaptığı değişiklikleri tutmak için bir "Context" veya ana bileşen seviyesinde "State" yapısı kurmalıyız. Bu örnekte, basitlik adına ana bileşen olan App.jsx içerisinde useState hook'unu kullanacağız.

import { useState, useEffect } from 'react';

function App() {
  const [fontSize, setFontSize] = useState(16);
  const [fontFamily, setFontFamily] = useState('Arial');

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

  return (
    

      
Yazı Tipi Özelleştirici
      {/* Kontrol bileşenleri buraya gelecek */}
    
  );
}

Buradaki useEffect hook'u, fontSize veya fontFamily değerlerinden biri değiştiğinde çalışır ve DOM üzerindeki CSS değişkenlerini günceller. Bu, React'in bildirimsel (declarative) yapısını kullanarak stilleri dinamik hale getirmenin en güvenli yoludur.

Özelleştirme Paneli Bileşeni Oluşturma

Kullanıcıya ayarları değiştirebileceği bir arayüz sunmak için ayrı bir ControlPanel bileşeni oluşturmak, kodunuzun sürdürülebilirliğini artırır. Bu bileşen, üst bileşenden gelen fonksiyonları kullanarak durumu günceller.

const ControlPanel = ({ fontSize, setFontSize, fontFamily, setFontFamily }) => {
  return (
    

      
        Yazı Boyutu: {fontSize}px
         setFontSize(e.target.value)} />
      
       setFontFamily(e.target.value)} value={fontFamily}>
        Arial
        Georgia
        Courier New
      
    
  );
};

Bu bileşen, kullanıcıdan gelen girdileri alır ve props aracılığıyla ana bileşene iletir. range input tipi, kullanıcıya görsel bir geri bildirim sağlar.

Uygulama Yöntemlerinin Karşılaştırılması

Güvenlik ve Performans Uyarıları

Kritik Güvenlik Uyarısı: Kullanıcıdan alınan değerleri doğrudan DOM'a veya CSS'e işlerken, girdilerin temizlendiğinden (sanitization) emin olun. Özellikle yazı tipi isimleri gibi kullanıcı girdilerini CSS'e enjekte ederken, sadece izin verilen (whitelist) değerleri kullanmak XSS (Cross-Site Scripting) saldırılarını önlemek için hayati önem taşır.

Performans tarafında ise, her input değişiminde DOM'un yeniden boyanmaması için debounce (gecikmeli işlem) tekniğini kullanabilirsiniz. Özellikle çok sayıda ayar seçeneği olduğunda, her tuş vuruşunda stil güncellemesi yapmak tarayıcıyı yorabilir.

Sıkça Sorulan Sorular

CSS değişkenleri yerine neden doğrudan stil objesi kullanmıyoruz?

Doğrudan stil objesi kullanmak, React'in her render döngüsünde tüm DOM ağacını yeniden hesaplamasına neden olabilir. CSS değişkenleri ise tarayıcı seviyesinde yönetildiği için çok daha performanslıdır.

Kullanıcı ayarlarını sayfayı yeniledikten sonra nasıl koruyabilirim?

Kullanıcı tercihlerini localStorage kullanarak tarayıcıda saklayabilir ve bileşen yüklendiğinde useEffect ile bu değerleri geri yükleyebilirsiniz.

Birden fazla yazı tipi ailesini nasıl desteklerim?

Bir dizi (array) içerisinde yazı tipi isimlerini tutabilir ve map fonksiyonu ile select elemanlarını dinamik olarak oluşturabilirsiniz.

Bu yapı mobil cihazlarda sorun çıkarır mı?

CSS değişkenleri modern tüm mobil tarayıcılarda desteklenmektedir. Ancak, yazı tipi boyutlarını belirlerken px yerine rem birimini tercih etmek erişilebilirlik açısından daha doğrudur.

Erişilebilirlik (A11y) için nelere dikkat etmeliyim?

Yazı tipi boyutunu artırdığınızda metinlerin taşmamasına ve kontrast oranlarının korunmasına dikkat etmelisiniz. Ayrıca, kullanıcıların klavye ile de bu ayarları yapabilmesini sağlamalısınız.

İleri Düzey İpuçları: Yazı Tipi Ölçeklendirme ve Tipografi Stratejileri

Dinamik yazı tipi özelleştirici yapınızı bir adım öteye taşımak için tipografik ölçeklendirme (modular scale) mantığını entegre edebilirsiniz. Kullanıcı sadece bir "büyük/küçük" seçeneği sunmak yerine, matematiksel bir oran (örneğin 1.250 - Major Third) kullanarak tüm başlık ve gövde metinlerinin orantılı büyümesini sağlayabilirsiniz.

Aşağıdaki örnekte, kullanıcı bir "ölçek katsayısı" seçtiğinde, CSS değişkenleri üzerinden tüm hiyerarşinin nasıl güncellendiğini görebilirsiniz:

// TypographyScale.js
const scaleFactors = {
  small: 1.125,
  medium: 1.25,
  large: 1.414
};

export const updateTypographyScale = (factor) => {
  document.documentElement.style.setProperty('--type-scale', factor);
  // CSS tarafında kullanım: font-size: calc(1rem * var(--type-scale));
};

Performans Optimizasyonu: Font Yükleme Stratejileri

Dinamik yazı tipi değiştirme sistemlerinde en sık karşılaşılan sorun, kullanıcı yeni bir yazı tipi seçtiğinde oluşan "Flash of Unstyled Text" (FOUT) veya "Flash of Invisible Text" (FOIT) durumudur. Bu durumu engellemek için Font Loading API ile entegre çalışmanız önerilir.

Kullanıcı bir yazı tipi seçtiğinde, o yazı tipinin yüklendiğinden emin olmadan arayüzü güncellemek, metinlerin titremesine neden olur. Aşağıdaki kod bloğu, yazı tipi yüklenene kadar bir yükleme durumu (loading state) yönetmenizi sağlar:

const loadCustomFont = async (fontFamily) => {
  try {
    const font = new FontFace(fontFamily, `url(/fonts/${fontFamily}.woff2)`);
    await font.load();
    document.fonts.add(font);
    document.body.style.fontFamily = fontFamily;
  } catch (error) {
    console.error("Yazı tipi yüklenemedi:", error);
  }
};

Stratejik Öneriler:

• Font-Display Swap: CSS tarafında font-display: swap; özelliğini mutlaka kullanın. Bu, tarayıcının yazı tipi yüklenene kadar sistem yazı tipini göstermesini sağlar.
• Subset Kullanımı: Eğer Google Fonts gibi servisler kullanıyorsanız, sadece ihtiyacınız olan karakter setlerini (örneğin sadece Latin) yükleyerek dosya boyutunu %70'e kadar düşürebilirsiniz.
• Caching: Kullanıcının seçtiği yazı tipini localStorage üzerinde tutarak, sonraki ziyaretlerde yazı tipinin anında uygulanmasını sağlayın.

Hata Ayıklama ve Test Süreçleri

Geliştirdiğiniz özelleştiricinin farklı tarayıcılarda ve cihazlarda tutarlı çalışması için "Visual Regression Testing" (Görsel Regresyon Testi) yapmanız kritiktir. Özellikle yazı tipi boyutu değiştiğinde, butonların veya kart bileşenlerinin taşmadığından emin olmak için Playwright veya Cypress gibi araçlarla ekran görüntüsü karşılaştırmalı testler yazabilirsiniz.

Ayrıca, geliştirici konsolunda CSS değişkenlerinin güncellenip güncellenmediğini kontrol etmek için şu basit denetimi kullanabilirsiniz:

// Konsol üzerinden test
const currentFontSize = getComputedStyle(document.documentElement)
  .getPropertyValue('--main-font-size');

console.log(`Güncel yazı tipi boyutu: ${currentFontSize}`);

Bu test yöntemi, React state'i ile DOM arasındaki senkronizasyon hatalarını ayıklamanıza yardımcı olur. Eğer state güncelleniyor ancak arayüz değişmiyorsa, CSS değişkenlerinin kapsamını (scope) kontrol etmelisiniz; değişkenler her zaman :root veya body üzerinde tanımlanmalıdır.

Sonuç

React ile dinamik bir yazı tipi özelleştirici geliştirmek, hem kullanıcı deneyimini zenginleştirir hem de modern web geliştirme pratiklerini anlamanızı sağlar. CSS değişkenlerinin gücünü React'in state yönetimiyle birleştirerek, performanslı ve esnek bir yapı kurdunuz. 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.

Bu rehberdeki kodlar eğitim amaçlıdır. Üretim ortamına almadan önce tüm kullanıcı girdilerini doğrulamayı ve güvenlik testlerini yapmayı unutmayın.