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

Ön Hazırlık ve Gereksinimler

Projeye başlamadan önce sisteminizde Node.js'in güncel bir sürümünün (LTS 20 veya üzeri önerilir) kurulu olduğundan emin olmalısınız. React 19 ve üzeri sürümlerin sunduğu güncel kanca (hook) yapılarını kullanacağız.

• Node.js (v20+) ve npm veya pnpm paket yöneticisi.
• Temel düzeyde React, Hooks (useState, useContext) ve CSS bilgisi.
• Modern bir kod editörü (VS Code önerilir).

Bir React projesi başlatmak için terminalinizde şu komutu çalıştırarak başlayabilirsiniz:

npx create-react-app font-customizer-app --template typescript
cd font-customizer-app
npm start

Bu komut, tip güvenli bir React ortamı oluşturacaktır. TypeScript kullanmak, yazı tipi ayarlarınızın tutarlı kalmasını sağlar ve olası hataları geliştirme aşamasında yakalamanıza yardımcı olur.

Dinamik Yazı Tipi Durum Yönetimi (State Management)

Yazı tipi ayarlarını uygulamanın genelinde kullanabilmek için React'in useState kancasını kullanacağız. Ancak, uygulamanın farklı bölümlerinde bu verilere erişmek için Context API kullanmak, "prop drilling" (veriyi gereksiz bileşenlere aktarma) sorununu ortadan kaldıracaktır.

Öncelikle bir FontContext.tsx dosyası oluşturarak merkezi bir yapı kuralım:

import { createContext, useState, ReactNode } from 'react';

export const FontContext = createContext({
  fontSize: 16,
  setFontSize: (size: number) => {},
  fontFamily: 'sans-serif',
  setFontFamily: (font: string) => {}
});

export const FontProvider = ({ children }: { children: ReactNode }) => {
  const [fontSize, setFontSize] = useState(16);
  const [fontFamily, setFontFamily] = useState('sans-serif');

  return (
    
      {children}
    
  );
};

Bu yapı, yazı tipi ayarlarını uygulamanın herhangi bir yerinden değiştirilebilir ve okunabilir hale getirir. FontProvider bileşenini uygulamanızın en üst seviyesinde (App.tsx) sarmalamanız gerekecektir.

CSS Değişkenleri ile Stil Uygulama

React state'indeki verileri CSS'e aktarmanın en performanslı yolu CSS değişkenlerini (CSS Variables) kullanmaktır. Bu yöntem, her render işleminde DOM'u doğrudan manipüle etmek yerine, tarayıcının stil motorunu verimli bir şekilde kullanır.

App bileşeninde bu değişkenleri kök elemana uygulayalım:

import { useContext } from 'react';
import { FontContext } from './FontContext';

const App = () => {
  const { fontSize, fontFamily } = useContext(FontContext);

  return (
    

      
        


İçerik Başlığı
        
Bu metin dinamik olarak değişen yazı tipi ayarlarına sahiptir.
      
    
  );
};

CSS dosyanızda ise bu değişkenleri şu şekilde tanımlayabilirsiniz:

.content {
  font-size: var(--dynamic-font-size);
  font-family: var(--dynamic-font-family);
  transition: font-size 0.2s ease-in-out;
}

Yazı Tipi Özelleştirici Paneli Oluşturma

Kullanıcının ayarları değiştirebileceği bir kontrol paneli oluşturmak, etkileşimi tamamlar. Burada standart HTML form elemanlarını kullanacağız.

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

  return (
    

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

Bu bileşen, kullanıcıdan aldığı girdileri doğrudan context üzerinden günceller. onChange olayı tetiklendiğinde, React state'i günceller ve CSS değişkenleri otomatik olarak güncellenerek arayüzü yansıtır.

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

Güvenlik Uyarısı: Kullanıcıdan alınan yazı tipi isimlerini doğrudan stil özelliklerine atarken, XSS (Cross-Site Scripting) riskine karşı girdileri mutlaka doğrulayın. Sadece izin verilen (whitelist) yazı tipi listesini kullanın, doğrudan kullanıcı girişini CSS'e enjekte etmeyin.

Sıkça Sorulan Sorular

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

Hayır, yazı tipi boyutunun veya ailesinin JavaScript aracılığıyla değiştirilmesi, arama motorlarının içeriği okumasını engellemez. Ancak, sayfa yüklenirken "Flash of Unstyled Content" (FOUC) yaşamamak için varsayılan değerleri CSS dosyanızda tanımlamanız önemlidir.

Kullanıcı ayarlarını tarayıcı kapandıktan sonra nasıl korurum?

localStorage kullanarak kullanıcının seçimlerini kaydedebilir ve uygulama ilk yüklendiğinde useEffect ile bu değerleri state'e geri yükleyebilirsiniz.

Performans kaybı yaşanır mı?

CSS değişkenleri kullanıldığı sürece performans kaybı ihmal edilebilir düzeydedir. Ancak, çok fazla bileşeni aynı anda güncelleyen karmaşık hesaplamalardan kaçınmalısınız.

Mobil cihazlarda yazı tipi yönetimi nasıl olmalı?

Mobil cihazlarda yazı tipi boyutlarını rem birimi ile yönetmek ve medya sorguları (media queries) ile başlangıç değerlerini belirlemek en iyi pratiktir.

Farklı yazı tiplerini nasıl yükleyebilirim?

Google Fonts gibi servislerden yazı tiplerini @import veya link etiketiyle ekleyip, CSS değişkenlerinizde bu isimleri tanımlayarak kolayca geçiş yapabilirsiniz.

İleri Düzey Optimizasyon: Yazı Tipi Yükleme Stratejileri

Dinamik yazı tipi özelleştirici uygulamanızda, kullanıcı farklı bir font seçtiğinde tarayıcının bu dosyayı anında indirmesi performans sorunlarına yol açabilir. Kullanıcı deneyimini kesintisiz hale getirmek için Font Loading API ile yazı tiplerinin durumunu yönetmek en profesyonel yaklaşımdır.

Aşağıdaki örnekte, seçilen yazı tipinin başarıyla yüklenip yüklenmediğini kontrol eden ve yükleme sürecinde bir "fallback" (yedek) yazı tipi gösteren bir kontrol mekanizması yer almaktadır:

const loadFont = async (fontName) => {
  const font = new FontFace(fontName, `url(/fonts/${fontName}.woff2)`);
  try {
    const loadedFont = await font.load();
    document.fonts.add(loadedFont);
    console.log(`${fontName} başarıyla yüklendi.`);
  } catch (err) {
    console.error("Yazı tipi yüklenirken hata oluştu:", err);
  }
};

Bu yaklaşım, özellikle düşük internet hızına sahip kullanıcılar için yazı tipi geçişlerinde oluşabilecek "Flash of Unstyled Text" (FOUT) sorununu minimize eder.

Hata Ayıklama ve Geliştirici Deneyimi

Dinamik stil değişikliklerinde en sık karşılaşılan sorun, CSS değişkenlerinin güncellenmesine rağmen tarayıcının render işlemini tetiklememesi veya yanlış font ailesinin uygulanmasıdır. Bu tür durumları izlemek için React'in useLayoutEffect kancasını kullanarak DOM üzerindeki değişiklikleri senkronize edebilirsiniz.

Yaygın Hata Senaryoları ve Çözümleri

• Değişkenlerin Uygulanmaması: CSS değişkenlerinizin :root veya body seviyesinde tanımlandığından ve React state'inin güncellendiğinden emin olun.
• Font İsim Çakışmaları: CSS'te tanımladığınız font-family ismi ile @font-face bloğundaki ismin birebir aynı olduğundan emin olun.
• Tarayıcı Önbelleği: Geliştirme aşamasında yazı tipi dosyalarını değiştiriyorsanız, tarayıcı önbelleğini temizlemek veya "Disable Cache" seçeneğini aktif etmek gerekebilir.

Aşağıdaki tablo, yazı tipi özelleştirici geliştirirken dikkat etmeniz gereken performans metriklerini özetlemektedir:

Geliştirme sürecinde Chrome DevTools içerisindeki Rendering sekmesini kullanarak "Layout Shift" (Düzen Kayması) olaylarını izlemek, yazı tipi değişimlerinin sayfa düzenini ne kadar bozduğunu analiz etmenize yardımcı olacaktır.

Sonuç

React ile dinamik bir yazı tipi özelleştirici yapmak, hem kullanıcı deneyimini zenginleştirir hem de projenizin erişilebilirlik standartlarını yükseltir. CSS değişkenleri ve React Context API'nin birleşimi, sürdürülebilir ve temiz bir mimari sunar. Bir sonraki adım olarak, bu yapıya "Karanlık Mod" (Dark Mode) desteği ekleyerek veya kullanıcı tercihlerini bir veritabanında saklayarak deneyimi bir üst seviyeye taşıyabilirsiniz.

Sorumluluk Reddi: Bu rehberde paylaşılan kod örnekleri eğitim amaçlıdır. Üretim ortamında (production) kullanmadan önce, girdilerin doğrulanması (sanitization) ve performans testlerinin yapılması geliştiricinin sorumluluğundadır.