Gereksinimler ve Ön Hazırlık

Projenize başlamadan önce bilgisayarınızda Node.js'in güncel sürümünün (LTS) yüklü olduğundan emin olun. React 19 ve üzeri sürümlerle uyumlu bir ortamda çalışacağız. Projeyi başlatmak için terminalinizde şu komutları kullanabilirsiniz:

npx create-react-app yazi-tipi-ozellestirici
cd yazi-tipi-ozellestirici
npm install styled-components

Bu komutlar, projenin temel yapısını kuracak ve stil yönetimini kolaylaştırmak için endüstri standardı olan styled-components kütüphanesini dahil edecektir. Kurulum tamamlandıktan sonra geliştirme sunucusunu npm start komutu ile başlatabilirsiniz.

Adım 1: Yazı Tipi Durum Yönetimi (State Management)

Dinamik bir sistem kurmak için öncelikle kullanıcı tercihlerini tutacak bir merkezi state yapısına ihtiyacımız var. React'in useState hook'unu kullanarak yazı tipi boyutu ve ağırlığı gibi değişkenleri tanımlayacağız.

import { useState } from 'react';

const useFontSettings = () => {
  const [fontSize, setFontSize] = useState(16);
  const [fontWeight, setFontWeight] = useState(400);

  return { fontSize, setFontSize, fontWeight, setFontWeight };
};

Bu özel hook (custom hook), bileşenleriniz arasında yazı tipi ayarlarını paylaşmanızı sağlar. Neden hook kullanıyoruz? Çünkü bu yaklaşım, mantığı UI bileşenlerinden ayırarak kodun okunabilirliğini ve test edilebilirliğini artırır.

Adım 2: CSS Değişkenleri ile Dinamik Stilleme

React bileşenlerinde her bir öğeye doğrudan stil vermek yerine, CSS değişkenlerini (CSS Custom Properties) kullanmak performansı artırır. Bu yöntem, tarayıcının yeniden render (yeniden çizim) maliyetini optimize eder.

const GlobalStyles = ({ fontSize, fontWeight }) => {
  return (
    
      {`
        :root {
          --user-font-size: ${fontSize}px;
          --user-font-weight: ${fontWeight};
        }
        body {
          font-size: var(--user-font-size);
          font-weight: var(--user-font-weight);
        }
      `}
    
  );
};

Bu kod bloğu, kullanıcının seçtiği değerleri kök (root) seviyesinde CSS değişkenlerine dönüştürür. Böylece uygulamanın herhangi bir yerinde var(--user-font-size) kullanarak bu değeri çağırabilirsiniz.

Adım 3: Kullanıcı Kontrol Paneli Oluşturma

Kullanıcıların yazı tipi ayarlarını değiştirebileceği bir arayüz bileşeni oluşturalım. Burada input type="range" kullanarak sezgisel bir kaydırma çubuğu deneyimi sunacağız.

const FontControls = ({ fontSize, setFontSize, fontWeight, setFontWeight }) => {
  return (
    

      Yazı Boyutu: {fontSize}px
       setFontSize(Number(e.target.value))} 
      />
    
  );
};

Bu bileşen, kullanıcının yaptığı her değişikliği anlık olarak setFontSize fonksiyonu ile state'e yansıtır. Number() dönüşümü, input değerinin string olarak gelmesini engellemek için kritiktir.

Adım 4: Uygulama Entegrasyonu ve Test Etme

Şimdi tüm parçaları ana App.js dosyasında birleştirelim. Bileşenlerin birbirleriyle nasıl haberleştiğini gözlemleyin.

function App() {
  const { fontSize, setFontSize, fontWeight, setFontWeight } = useFontSettings();

  return (
    

      
      
      
        
Hoş Geldiniz
        
Bu metin dinamik olarak değişebilir.
      
    
  );
}

Uygulamayı test etmek için tarayıcınızda kaydırma çubuğunu hareket ettirin. Yazı boyutunun anlık olarak güncellendiğini görmelisiniz. Eğer güncelleme olmuyorsa, GlobalStyles içindeki CSS değişkeninin doğru tanımlanıp tanımlanmadığını Chrome Geliştirici Araçları (F12) üzerinden "Elements" sekmesinden kontrol edin.

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

Kullanıcı girişlerini doğrudan DOM'a yansıtırken XSS (Cross-Site Scripting) risklerine karşı dikkatli olmalıyız. Ancak CSS değişkenleri doğrudan stil niteliklerine atandığı için bu yöntem oldukça güvenlidir.

Kritik Güvenlik Uyarısı: Kullanıcıdan gelen verileri (örneğin yazı tipi ailesi ismi) doğrudan CSS'e enjekte ediyorsanız, mutlaka bir beyaz liste (whitelist) kullanın. Rastgele string değerlerini CSS özelliklerine atamak, stil enjeksiyonu saldırılarına yol açabilir.

Sıkça Sorulan Sorular

Yazı tipi ayarlarını sayfayı yenilediğimde nasıl koruyabilirim?

Ayarları localStorage kullanarak tarayıcı hafızasında saklayabilir ve useEffect hook'u ile uygulama başladığında bu değerleri geri yükleyebilirsiniz.

Çok sayıda yazı tipi desteği eklemek performansı düşürür mü?

Evet, çok fazla Google Font yüklemek sayfa açılış hızını yavaşlatır. Sadece gerekli olan ağırlıkları (weights) yüklemeye özen gösterin.

Bu yöntemi mobil cihazlarda nasıl optimize ederim?

CSS medya sorgularını (media queries) CSS değişkenleri ile birlikte kullanarak, mobil cihazlarda varsayılan font boyutlarını otomatik olarak ayarlayabilirsiniz.

React 19'da bu yöntem değişti mi?

Hayır, state yönetimi ve CSS değişkenleri React 19'da da aynı şekilde çalışmaktadır. Ancak use hook'u ile asenkron veri yüklemeleri daha kolay hale gelmiştir.

Neden styled-components kullanmalıyım?

Stillerin bileşenlere özel kalmasını sağlar (scoped CSS) ve dinamik değerleri CSS içine enjekte etmeyi çok daha temiz bir sözdizimi ile yapmanıza olanak tanır.

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

Dinamik yazı tipi özelleştirme sisteminizi bir üst seviyeye taşımak için sadece yazı tipi ailesini değil, aynı zamanda satır yüksekliği (line-height) ve harf aralığı (letter-spacing) gibi tipografik değişkenleri de kullanıcı kontrolüne açabilirsiniz. Bu, özellikle görme engelli kullanıcılar veya okuma güçlüğü çeken bireyler için erişilebilirlik (a11y) puanınızı doğrudan artıracaktır.

Aşağıdaki örnekte, mevcut state yapımıza satır yüksekliği kontrolünü nasıl entegre edebileceğinizi görebilirsiniz:

// Tipografik ayarlar için genişletilmiş state
const [typography, setTypography] = useState({
  fontFamily: 'Inter',
  lineHeight: 1.5,
  fontSize: 16
});

// CSS değişkenlerini güncelleme fonksiyonu
const updateStyles = () => {
  document.documentElement.style.setProperty('--base-line-height', typography.lineHeight);
  document.documentElement.style.setProperty('--base-font-size', `${typography.fontSize}px`);
};

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

Dinamik CSS değişkenleri ile çalışırken, özellikle eski tarayıcılar veya hatalı girdi gönderen kullanıcılar için bir "fallback" (yedek) mekanizması kurmak kritik öneme sahiptir. Kullanıcının seçtiği yazı tipi yüklenemediğinde uygulamanızın estetiğinin bozulmaması için CSS içerisinde @supports sorgularını ve güvenli yedekleri kullanmalısınız.

CSS Fallback Stratejisi

CSS değişkenleri tanımlarken, değişkenin değerinin boş gelmesi veya tanımlanamaması durumunda devreye girecek varsayılan değerleri mutlaka belirtin:

body {
  /* Değişken tanımlı değilse sans-serif kullan */
  font-family: var(--user-font, sans-serif);
  line-height: var(--base-line-height, 1.6);
  transition: font-family 0.3s ease, line-height 0.3s ease;
}

Hata ayıklama sürecinde, React DevTools kullanarak root elementine atanan CSS değişkenlerinin anlık olarak değişip değişmediğini "Elements" sekmesi altındaki "Styles" panelinden takip edebilirsiniz. Eğer değişkenler güncelleniyor ancak arayüz değişmiyorsa, değişkenlerin kapsamını (scope) kontrol edin; değişkenleri :root yerine belirli bir kapsayıcı (container) içinde tanımlamış olabilirsiniz.

Performans İzleme

Kullanıcı her yazı tipi değiştirdiğinde DOM üzerinde yapılan güncellemeler, çok büyük uygulamalarda "re-paint" (yeniden boyama) maliyetine neden olabilir. Bunu minimize etmek için:

• Debounce Kullanımı: Kullanıcı kaydırma çubuğunu (slider) hareket ettirirken her milisaniyede bir state güncellemek yerine, işlemi 100-200ms geciktirerek (debounce) çalıştırın.
• Font Yükleme Stratejisi: Google Fonts gibi harici kaynaklar kullanıyorsanız, font-display: swap; özelliğini kullanarak yazı tipi yüklenene kadar metnin görünmez kalmasını engelleyin.

// Debounce örneği: Slider değişimlerinde performansı koruyun
const handleFontSizeChange = debounce((value) => {
  setTypography(prev => ({ ...prev, fontSize: value }));
}, 200);

Sonuç

React ile dinamik bir yazı tipi özelleştirici oluşturmak, hem kullanıcı deneyimini zenginleştirir hem de uygulamanızın erişilebilirlik standartlarını yükseltir. CSS değişkenleri ve React state yönetimi arasındaki uyum, bu tür etkileşimli özellikler için en sağlam mimaridir. Bir sonraki adım olarak, bu yapıya "Karanlık Mod" desteği eklemeyi veya kullanıcı tercihlerini bir veritabanında saklayarak farklı cihazlarda senkronize etmeyi deneyebilirsiniz.

Yasal Uyarı: Bu makalede paylaşılan kod örnekleri eğitim amaçlıdır. Üretim ortamına almadan önce tüm girdi doğrulamalarını (input validation) ve güvenlik testlerini tamamladığınızdan emin olun. Yazılım güvenliği, geliştiricinin sorumluluğundadır.