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ştirmeye başlamadan önce sisteminizde Node.js'in güncel bir sürümünün (LTS) yüklü olduğundan emin olmalısınız. Projemizde modern React kancalarını (hooks) ve CSS değişkenlerini kullanacağız. Kurulum için aşağıdaki adımları izleyin:

• Node.js: v20 veya üzeri bir sürüm önerilir.
• React: v19 veya üzeri (Concurrent Features desteği ile).
• Paket Yöneticisi: npm veya pnpm kullanımı uygundur.

Terminalinizde yeni bir React projesi oluşturmak için şu komutu çalıştırın:

npx create-react-app yazi-tipi-ozellestirici --template typescript
cd yazi-tipi-ozellestirici
npm install

Bu komut, TypeScript destekli modern bir React altyapısı kurar. TypeScript kullanımı, props (bileşen özellikleri) tanımlarında hata yapmanızı engeller ve kod kalitesini artırır.

Adım 1: Context API ile Durum Yönetimi Kurulumu

Yazı tipi ayarlarının tüm uygulama genelinde erişilebilir olması gerekir. Bu nedenle, verileri prop drilling (özellikleri alt bileşenlere tek tek aktarma) yapmadan yönetmek için React Context API kullanacağız. Bu yöntem, uygulamanın performansını korur ve kodun okunabilirliğini artırır.

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

const FontContext = createContext(null);

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ı tutan merkezi bir depo oluşturur. FontProvider bileşeni, tüm alt bileşenlerin bu değerlere erişmesini sağlar.

Adım 2: CSS Değişkenlerini Dinamik Olarak Uygulama

React durumlarını CSS ile bağlamak için en performanslı yöntem, kök (root) element üzerinde CSS değişkenlerini güncellemektir. Bu sayede her bir HTML elementi için ayrı inline style tanımlamak yerine, global bir stil yönetimi yapabilirsiniz.

import { useEffect } from 'react';

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

Bu özel kanca (custom hook), durum her değiştiğinde tarayıcının DOM (Belge Nesne Modeli) yapısındaki değişkenleri günceller. CSS dosyanızda artık font-size: var(--app-font-size); şeklinde tanımlama yapabilirsiniz.

Adım 3: Kullanıcı Arayüzü İçin Kontrol Bileşeni Oluşturma

Kullanıcının yazı tipini değiştirebileceği bir panel oluşturmalıyız. Bu panel, input ve select elementlerini kullanarak durumu günceller. Kullanıcı dostu bir arayüz için temiz bir form yapısı tercih ediyoruz.

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

  return (
    

      Boyut: {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 doğrudan Context üzerinden günceller. Number() dönüşümü, input değerinin string tipinden integer tipine çevrilmesi için kritiktir.

Adım 4: Uygulama Performansı ve Yöntem Karşılaştırması

Yazı tipi özelleştirme işlemlerinde farklı yaklaşımlar mevcuttur. Aşağıdaki tablo, bu yöntemlerin avantaj ve dezavantajlarını özetlemektedir.

Adım 5: Güvenlik ve Hata Yönetimi

Kullanıcıdan alınan verilerle DOM manipülasyonu yaparken XSS (Siteler Arası Betik Çalıştırma) saldırılarına karşı dikkatli olmalıyız. Yazı tipi değerlerini doğrudan CSS'e enjekte ederken, değerlerin beklenen formatta olduğundan emin olunmalıdır.

Kritik Uyarı: Kullanıcı girdilerini doğrudan stil özelliklerine atarken mutlaka bir "whitelist" (izin verilenler listesi) kullanın. Örneğin, yazı tipi ailesi için sadece belirli font isimlerini kabul eden bir kontrol mekanizması ekleyin.

const validateFontFamily = (family) => {
  const allowedFonts = ['sans-serif', 'serif', 'monospace'];
  return allowedFonts.includes(family) ? family : 'sans-serif';
};

Bu fonksiyon, kullanıcı tarafından gönderilen verinin güvenli olup olmadığını kontrol eder ve kötü amaçlı CSS enjeksiyonlarını engeller.

Sıkça Sorulan Sorular

CSS değişkenleri neden tercih edilmeli?

CSS değişkenleri, tarayıcı tarafından yerel olarak işlenir ve JavaScript ile yeniden render (yeniden çizim) maliyetini düşürür, bu da performansı artırır.

React 19 ile bu yapı değişti mi?

React 19, daha iyi state optimizasyonu sunar; ancak Context API kullanımı ve CSS değişkeni mantığı hala en verimli yöntemlerden biridir.

Yazı tipi ayarları sayfayı yenileyince silinir mi?

Evet, tarayıcı yenilendiğinde state sıfırlanır. Kalıcı olması için localStorage kullanarak ayarları saklamanız önerilir.

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

Kullanıcı yazı tipi boyutunu çok büyüttüğünde arayüzün kırılmadığından (responsive) emin olmalı ve kontrast oranlarını korumalısınız.

Mobil cihazlarda yazı tipi kontrolü nasıl olmalı?

Mobil cihazlarda dokunmatik dostu slider'lar (range input) ve kolay seçilebilir select menüleri kullanmak kullanıcı deneyimini artırır.

İleri Düzey İpucu: Google Fonts ile Dinamik Entegrasyon

Kullanıcıların sadece sistem yazı tiplerini değil, Google Fonts kütüphanesindeki yüzlerce farklı seçeneği de kullanabilmesini sağlamak, uygulamanıza profesyonel bir esneklik katar. Bu işlem için Google Fonts API'sinden gelen URL'leri dinamik olarak document.head içerisine enjekte etmemiz gerekir.

Aşağıdaki yardımcı fonksiyon, seçilen yazı tipini uygulama çalışma zamanında (runtime) yüklemenize olanak tanır:

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

// Kullanımı
const handleFontChange = (newFont) => {
  loadGoogleFont(newFont);
  document.documentElement.style.setProperty('--main-font', newFont);
};

Bu yaklaşımı kullanırken, her yazı tipi değişikliğinde gereksiz ağ trafiği oluşturmamak için daha önce yüklenmiş yazı tiplerini bir dizi içerisinde takip etmeniz ve mükerrer yüklemeleri engellemeniz önerilir.

Performans Optimizasyonu: CSS Değişkenlerinde "Debounce" Kullanımı

Kullanıcı bir kaydırma çubuğu (slider) ile yazı tipi boyutunu değiştirirken, her piksel değişiminde uygulamanın yeniden render olması performans sorunlarına yol açabilir. Özellikle karmaşık bileşen ağaçlarında bu durum "jank" (takılma) hissine neden olur. Bu sorunu çözmek için debounce tekniğini kullanarak state güncellemelerini geciktirmeliyiz.

Aşağıdaki örnekte, lodash.debounce kullanarak yazı tipi boyutunu güncelleyen bir yapı görebilirsiniz:

import { useCallback } from 'react';
import debounce from 'lodash/debounce';

const FontSizeController = ({ setFontSize }) => {
  const debouncedUpdate = useCallback(
    debounce((value) => {
      setFontSize(value);
    }, 150),
    []
  );

  return (
     debouncedUpdate(e.target.value)} 
    />
  );
};

Bu yöntem, kullanıcı kaydırma işlemini bitirdikten 150 milisaniye sonra state'i güncelleyerek tarayıcı üzerindeki işlem yükünü ciddi oranda azaltır.

Hata Ayıklama ve Tarayıcı Uyumluluğu

Dinamik stil uygulamalarında karşılaşılan en yaygın sorun, CSS değişkenlerinin tarayıcı tarafından desteklenmemesi veya geçersiz değerlerin atanmasıdır. Geliştirme sürecinde şu kontrol listesini kullanabilirsiniz:

• Geçersiz Değerler: Kullanıcıdan gelen girdiyi mutlaka bir sınırlandırma (min/max) fonksiyonundan geçirin. Örneğin, yazı tipi boyutunu 8px'in altına veya 72px'in üstüne çıkmasını engelleyin.
• CSS Fallback: CSS değişkenlerini tanımlarken her zaman bir yedek değer belirtin: font-family: var(--main-font, 'Arial', sans-serif);.
• Tarayıcı Konsolu: getComputedStyle(document.documentElement).getPropertyValue('--main-font') komutu ile o anki değişken değerini konsoldan doğrulayarak state yönetiminizin doğru çalışıp çalışmadığını kontrol edebilirsiniz.

İpucu: Eğer uygulamanızda çok sayıda dinamik stil değişikliği yapıyorsanız, tarayıcı geliştirici araçlarındaki "Elements" sekmesinde "Styles" kısmını izleyerek değişkenlerin canlı olarak güncellenip güncellenmediğini gözlemlemek hata ayıklama sürecini hızlandırır.

Sonuç

React ile dinamik bir yazı tipi özelleştirici oluşturmak, hem kullanıcı deneyimini hem de uygulamanızın erişilebilirliğini bir üst seviyeye taşır. CSS değişkenlerinin gücünü React'in state yönetimi ile birleştirerek, performanslı ve güvenli bir çözüm elde etmiş olduk. Bir sonraki adım olarak, bu ayarları localStorage ile kalıcı hale getirebilir veya kullanıcıların kendi özel yazı tipi dosyalarını (Google Fonts gibi) yüklemelerine olanak tanıyan bir sistem geliştirebilirsiniz.

Sorumluluk Reddi: Bu makaledeki kod örnekleri eğitim amaçlıdır. Üretim ortamında (production) kullanmadan önce, özellikle kullanıcı girdilerini işlediğiniz kısımlarda, güvenlik testlerini ve tarayıcı uyumluluk kontrollerini yapmanız önerilir. Yazılım güvenliği, sürekli güncellenen bir süreçtir.