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

Gereksinimler ve Ön Hazırlık

Projeye başlamadan önce bilgisayarınızda Node.js'in güncel bir sürümünün (LTS 2026) yüklü olduğundan emin olmalısınız. React projenizi Vite kullanarak oluşturmak, hızlı bir geliştirme ortamı sağlar.

• Node.js (v20 veya üzeri)
• React 19.x veya üzeri
• Temel CSS bilgisi
• Tarayıcı geliştirici araçları (Chrome DevTools veya Firefox Developer Edition)

Projenizi başlatmak için terminalinizde şu komutları çalıştırarak temel yapılandırmayı oluşturabilirsiniz:

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

Bu komutlar, projenizin temel dizin yapısını oluşturacak ve geliştirme sunucusunu ayağa kaldıracaktır. Artık kodlamaya başlamaya hazırsınız.

Adım 1: Yazı Tipi Ayarları İçin Context Yapısını Kurma

Uygulama genelinde yazı tipi tercihlerini yönetmek için React Context API kullanmak en temiz yöntemdir. Bu sayede, her bileşene tek tek prop geçmek yerine, ihtiyaç duyan bileşenin doğrudan verilere erişmesini sağlarız.

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

const FontContext = createContext();

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

  return (
    
      {children}
    
  );
};

export const useFont = () => useContext(FontContext);

Yukarıdaki kod, yazı tipi boyutunu ve ailesini tutan merkezi bir depo oluşturur. useFont özel hook'u, bu değerlere erişimi kolaylaştırır.

Adım 2: Dinamik Stil Uygulayıcı Bileşeni Oluşturma

Context ile yönettiğimiz verileri, ana uygulama kapsayıcısına (Wrapper) yansıtmalıyız. Bu, tüm alt bileşenlerin güncellenen değerleri anında almasını sağlar.

const AppContent = ({ children }) => {
  const { fontSize, fontFamily } = useFont();

  const style = {
    fontSize: `${fontSize}px`,
    fontFamily: fontFamily,
    transition: 'all 0.3s ease'
  };

  return 
{children}
;
};

Bu bileşen, Context'ten aldığı değerleri bir stil nesnesine dönüştürür. transition kullanımı, kullanıcı tercihi değiştirdiğinde arayüzün yumuşak bir geçişle güncellenmesini sağlar.

Adım 3: Kullanıcı İçin Kontrol Paneli Tasarımı

Kullanıcının yazı tipini değiştirebileceği bir arayüz bileşeni gereklidir. Bu bileşen, fontSize değerini bir kaydırıcı (range input) ile, fontFamily değerini ise bir seçim kutusu (select) ile yönetecektir.

const FontControls = () => {
  const { fontSize, setFontSize, setFontFamily } = useFont();

  return (
    

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

Burada Number() dönüşümü önemlidir; çünkü HTML input öğeleri değerleri varsayılan olarak string (metin) tipinde döndürür.

Adım 4: Tercihleri Kalıcı Hale Getirme (LocalStorage)

Kullanıcı sayfayı yenilediğinde ayarlarının kaybolmaması için useEffect kancasını kullanarak verileri tarayıcının yerel deposuna kaydetmeliyiz.

useEffect(() => {
  const savedSize = localStorage.getItem('fontSize');
  if (savedSize) setFontSize(Number(savedSize));
}, []);

useEffect(() => {
  localStorage.setItem('fontSize', fontSize);
}, [fontSize]);

Bu yaklaşım, kullanıcı deneyimini kişiselleştirir. İlk useEffect sadece bileşen yüklendiğinde çalışır, ikincisi ise her değişiklikte veriyi günceller.

Karşılaştırma: Yazı Tipi Yönetim Yöntemleri

Güvenlik Uyarısı: Yerel depolama (localStorage) üzerinden gelen verileri doğrudan DOM'a enjekte ederken dikkatli olun. Eğer yazı tipi ismi gibi veriler kullanıcı girdisinden geliyorsa, XSS (Cross-Site Scripting) saldırılarına karşı veriyi mutlaka doğrulayın (sanitize).

Sıkça Sorulan Sorular

Dinamik yazı tipi değişimi performansı etkiler mi?

Doğru kullanıldığında (örneğin sadece gerekli bileşenleri render ederek) performans kaybı ihmal edilebilir düzeydedir. Gereksiz yeniden render işlemlerini engellemek için React.memo kullanabilirsiniz.

Neden CSS değişkenleri yerine inline style kullanıyoruz?

Inline style, React state'i ile doğrudan senkronize olduğu için dinamik değerleri anlık olarak uygulamak daha pratiktir. Ancak, çok büyük projelerde CSS değişkenlerini (CSS Variables) JS ile güncellemek daha performanslı olabilir.

Kullanıcı ayarları nasıl sıfırlanabilir?

localStorage.removeItem('fontSize') komutunu kullanarak ve state değerlerini varsayılanlarına döndüren bir "Sıfırla" butonu ekleyerek bu özelliği kolayca kazandırabilirsiniz.

Mobil cihazlarda yazı tipi boyutu nasıl olmalı?

Mobil cihazlar için 16px taban değerini korumak ve kullanıcıya 14px ile 20px arasında bir aralık sunmak en iyi erişilebilirlik uygulamasıdır.

Bu yöntem Google Fontları ile çalışır mı?

Evet, yazı tipi ailesi değerini (font-family) CSS'te tanımlı olan herhangi bir web fontu ile değiştirerek Google Fontlarını da dinamik olarak yükleyebilirsiniz.

İleri Düzey Optimizasyon: Font Yükleme Stratejileri

Dinamik yazı tipi özelleştirici uygulamanızda, kullanıcı yazı tipini değiştirdiğinde tarayıcının yeni font dosyasını indirmesi bir "layout shift" (düzen kayması) veya "FOIT" (Flash of Invisible Text) sorununa yol açabilir. Bu durumu engellemek için font-display özelliğini CSS içerisinde doğru yapılandırmanız kritiktir.

Google Fontları veya özel font dosyalarını kullanırken, fontların önbelleğe alınmasını sağlamak ve yükleme anındaki titremeyi önlemek için aşağıdaki CSS yaklaşımını uygulayabilirsiniz:

@font-face {
  font-family: 'DinamikFont';
  src: url('/fonts/ozel-font.woff2') format('woff2');
  font-display: swap; /* Font yüklenene kadar sistem fontunu göster */
}

Ayrıca, React uygulamanızda font değişimlerini yönetirken document.fonts.ready API'sini kullanarak fontun tamamen yüklendiğinden emin olduktan sonra arayüzü güncelleyebilirsiniz:

const applyFont = async (fontFamily) => {
  try {
    await document.fonts.load(`1em ${fontFamily}`);
    document.documentElement.style.setProperty('--main-font', fontFamily);
  } catch (err) {
    console.error("Font yükleme hatası:", err);
  }
};

Alternatif: Styled-Components ile Dinamik Tema Yönetimi

Eğer projenizde styled-components veya emotion gibi CSS-in-JS kütüphaneleri kullanıyorsanız, Context API ile gelen değerleri doğrudan bileşenlerinizin stil tanımlarına enjekte edebilirsiniz. Bu yöntem, inline stillere göre daha temiz bir kod yapısı sunar ve karmaşık bileşen ağaçlarında yönetimi kolaylaştırır.

Aşağıdaki örnekte, bir ThemeProvider kullanarak yazı tipi tercihlerini tüm uygulama genelinde nasıl dağıtabileceğinizi görebilirsiniz:

import styled, { ThemeProvider } from 'styled-components';

const GlobalStyles = styled.div`
  font-family: ${props => props.theme.fontFamily};
  font-size: ${props => props.theme.fontSize}px;
  transition: all 0.3s ease;
`;

// Uygulama içerisinde kullanımı:
const App = () => {
  const { fontSettings } = useFontContext();
  
  return (
    
      
        




Dinamik İçerik
      
    
  );
};

Bu yaklaşım, özellikle büyük ölçekli uygulamalarda stil çakışmalarını önler ve yazı tipi değişikliklerinin tüm alt bileşenlere otomatik olarak yansımasını sağlar. transition özelliği ekleyerek, kullanıcı ayarları değiştirdiğinde yazı tipi boyutunun ani değil, akıcı bir şekilde değişmesini sağlayarak kullanıcı deneyimini bir üst seviyeye taşıyabilirsiniz.

Sonuç

React ile dinamik bir yazı tipi özelleştirici oluşturmak, hem kullanıcı deneyimini iyileştiren hem de modern web standartlarına uygun, erişilebilir bir özelliktir. Bu rehberde öğrendiğiniz Context API, State yönetimi ve LocalStorage kullanımı, sadece yazı tipi için değil, tema yönetimi (karanlık/aydınlık mod) gibi diğer kişiselleştirme özellikleri için de temel teşkil eder.

Sorumluluk Reddi: Bu makaledeki kod örnekleri eğitim amaçlıdır. Üretim ortamına almadan önce tüm girdileri doğrulamalı ve güvenlik açıklarına karşı projenizi test etmelisiniz.

Bir sonraki adım olarak, bu projeye bir "Tema Değiştirici" (Dark/Light Mode) ekleyerek öğrendiklerinizi pekiştirebilirsiniz.