Javascript İle Tarayıcı Tabanlı Bir Sayfa İçi Yazı Tipi Özelleştirici Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Bu projeyi hayata geçirmek için temel düzeyde HTML, CSS ve JavaScript bilgisine sahip olmanız yeterlidir. Herhangi bir derleyiciye veya karmaşık bir geliştirme ortamına ihtiyaç duymadan, modern bir tarayıcı (Chrome, Firefox, Edge veya Safari) ve bir kod editörü (VS Code gibi) ile çalışmaya başlayabilirsiniz.

• HTML5: Yapısal içerik için temel iskelet.
• CSS3: Stil yönetimi ve değişkenler (CSS Variables).
• JavaScript (ES6+): DOM manipülasyonu ve tarayıcı depolama (LocalStorage).

Projeye başlamadan önce, projenizin kök dizininde bir index.html ve bir script.js dosyası oluşturduğunuzdan emin olun. Tarayıcıların 2026 standartlarına uygun olarak, ES6 modüllerini ve güncel DOM API'lerini kullanacağız.

Temel HTML Yapısını Kurma

Özelleştiricinin çalışması için kullanıcıdan girdi alacak arayüz elementlerine ihtiyacımız var. Bir seçim kutusu (select) ve bir kaydırma çubuğu (range input) kullanarak kullanıcıya kontrol imkanı sunacağız.

  Yazı Tipi:
  
    Sans-Serif
    Serif
    Monospace
  

  Boyut:
  



  
Burası özelleştirilecek metin alanıdır.

Yukarıdaki kod, kullanıcının yazı tipini ve boyutunu değiştirebileceği basit bir arayüz sağlar. article etiketi, stillerin uygulanacağı ana kapsayıcı görevini görür.

JavaScript ile DOM Manipülasyonu

Şimdi, kullanıcı arayüzdeki değişiklikleri yaptığında bunları sayfaya yansıtacak JavaScript kodlarını yazalım. Burada addEventListener yöntemini kullanarak olay dinleyicileri (event listeners) tanımlayacağız.

const fontSelect = document.getElementById('font-family');
const sizeInput = document.getElementById('font-size');
const contentArea = document.getElementById('content');

fontSelect.addEventListener('change', (e) => {
  contentArea.style.fontFamily = e.target.value;
});

sizeInput.addEventListener('input', (e) => {
  contentArea.style.fontSize = e.target.value + 'px';
});

Bu kod bloğu, kullanıcı seçim yaptığında style özelliğini doğrudan değiştirir. input olayı, kaydırma çubuğu hareket ettikçe anlık geri bildirim almak için idealdir.

LocalStorage ile Tercihleri Kalıcı Hale Getirme

Kullanıcı sayfayı yenilediğinde ayarların sıfırlanmaması için localStorage kullanmalıyız. Bu yöntem, verileri kullanıcının tarayıcısında kalıcı olarak saklar.

// Ayarları kaydetme fonksiyonu
function savePreferences(key, value) {
  localStorage.setItem(key, value);
}

// Ayarları yükleme fonksiyonu
function loadPreferences() {
  const savedFont = localStorage.getItem('fontFamily');
  const savedSize = localStorage.getItem('fontSize');

  if (savedFont) {
    contentArea.style.fontFamily = savedFont;
    fontSelect.value = savedFont;
  }
  if (savedSize) {
    contentArea.style.fontSize = savedSize + 'px';
    sizeInput.value = parseInt(savedSize);
  }
}

// Sayfa yüklendiğinde çalıştır
window.onload = loadPreferences;

Bu adımda, localStorage kullanarak kullanıcı deneyimini bir üst seviyeye taşıdık. Güvenlik açısından, localStorage üzerinden alınan verilerin doğrudan HTML içeriğine (örneğin innerHTML ile) eklenmemesi gerektiğini unutmayın; aksi takdirde XSS (Cross-Site Scripting) zafiyetlerine yol açabilirsiniz.

CSS Değişkenleri ile Performans Optimizasyonu

Daha temiz bir mimari için doğrudan stil vermek yerine CSS değişkenlerini değiştirmek daha profesyonel bir yaklaşımdır. Bu sayede stil yönetimi merkezi bir noktada toplanır.

:root {
  --main-font: sans-serif;
  --main-size: 16px;
}

#content {
  font-family: var(--main-font);
  font-size: var(--main-size);
}

JavaScript tarafında ise sadece kök (root) değişkenlerini güncellememiz yeterli olacaktır:

document.documentElement.style.setProperty('--main-font', e.target.value);

Bu yöntem, tarayıcının yeniden boyama (repaint) işlemlerini optimize etmesine yardımcı olur ve kodunuzun okunabilirliğini artırır.

Karşılaştırma: Yöntemlerin Avantajları

Kritik Güvenlik Uyarısı: Kullanıcıdan alınan verileri (input değerleri) asla doğrudan innerHTML veya document.write() gibi fonksiyonlarla DOM'a yansıtmayın. Bu, saldırganların zararlı scriptler çalıştırmasına neden olabilir. Sadece style veya textContent gibi güvenli özellikleri kullanın.

Sıkça Sorulan Sorular

Yazı tipi özelleştirici mobil cihazlarda çalışır mı?

Evet, kullandığımız range ve select elementleri mobil uyumludur. Dokunmatik ekranlarda sorunsuz çalışır.

Kullanıcı ayarları tüm sitede mi geçerli olur?

Eğer localStorage anahtarlarını tüm sayfalarda aynı isimle kullanırsanız, evet, ayarlar sitenin geneline yayılır.

Google Fonts kullanabilir miyim?

Elbette. Google Fonts'tan yüklediğiniz yazı tiplerini select seçeneklerine ekleyerek kullanıcının seçimine sunabilirsiniz.

Bu yöntem SEO'yu etkiler mi?

Hayır, JavaScript ile yapılan görsel değişiklikler arama motoru botları tarafından indekslenmez, dolayısıyla SEO üzerinde olumsuz bir etkisi yoktur.

Tarayıcı desteği nasıldır?

Modern tarayıcıların tamamı localStorage ve CSS değişkenlerini desteklemektedir. 2026 yılı itibarıyla güncel tarayıcılarda hiçbir sorun yaşanmaz.

İleri Seviye İpuçları ve Performans Optimizasyonu

Yazı tipi özelleştiricinizin kullanıcı deneyimini bir üst seviyeye taşımak için sadece işlevsellik yeterli değildir. Özellikle yazı tipi dosyalarının yüklenme süresi, sayfa performansını (LCP - Largest Contentful Paint) doğrudan etkileyen bir faktördür. Bu bölümde, uygulamanızı profesyonel bir seviyeye taşıyacak teknik detaylara odaklanacağız.

Font Yükleme Stratejileri ve FOUT/FOIT Yönetimi

Kullanıcı yazı tipini değiştirdiğinde, tarayıcı yeni dosyayı indirirken kısa süreli bir boşluk veya "Flash of Unstyled Text" (FOUT) yaşanabilir. Bunu engellemek için font-display: swap; özelliğini CSS'inizde mutlaka kullanmalısınız. Ayrıca, JavaScript ile yazı tipi değişimlerini yönetirken CSS Font Loading API kullanarak yazı tipinin yüklenip yüklenmediğini kontrol edebilirsiniz.

// Yazı tipi yükleme durumunu takip etme
document.fonts.load('1em "Open Sans"').then(() => {
  console.log("Yazı tipi başarıyla yüklendi.");
  document.body.style.fontFamily = "'Open Sans', sans-serif";
});

Performans İçin Debounce Kullanımı

Eğer özelleştiricinizde bir "range" (kaydırıcı) kullanarak yazı tipi boyutunu anlık değiştiriyorsanız, her piksel değişiminde DOM'u güncellemek tarayıcıyı yorabilir. Bu durumu debounce fonksiyonu ile optimize ederek, kullanıcının kaydırma işlemini bitirmesini bekleyip güncellemeyi o zaman tetikleyebilirsiniz.

function debounce(func, delay) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  };
}

const updateFontSize = debounce((size) => {
  document.documentElement.style.setProperty('--main-font-size', size + 'px');
  localStorage.setItem('fontSize', size);
}, 200);

document.getElementById('fontSlider').addEventListener('input', (e) => {
  updateFontSize(e.target.value);
});

Hata Ayıklama ve Test Süreçleri

Geliştirdiğiniz özelleştiricinin farklı tarayıcılarda ve cihazlarda kararlı çalıştığından emin olmak için sistematik bir test süreci izlemelisiniz. Özellikle localStorage kullanımı sırasında oluşabilecek kota aşımları veya güvenlik kısıtlamaları (Private Browsing modu) göz önünde bulundurulmalıdır.

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

• LocalStorage Erişimi Engellendi: Bazı tarayıcılar "Gizli Mod"da localStorage erişimini kısıtlar. Kodunuzu bir try-catch bloğu içerisine alarak uygulamanın çökmesini engelleyebilirsiniz.
• CSS Değişkeni Tanımlanmamış: Eğer CSS değişkenleriniz henüz yüklenmeden JS çalışırsa, getComputedStyle ile değerleri kontrol ederek varsayılan bir değer atayın.
• Font Dosyası 404 Hatası: Kullanıcının seçtiği fontun URL'sinin geçerli olduğunu bir fetch isteği ile önceden doğrulayabilirsiniz.

try {
  localStorage.setItem('test', 'data');
  localStorage.removeItem('test');
} catch (e) {
  console.warn("LocalStorage kullanılamıyor, ayarlar kaydedilmeyecek.");
}

Tarayıcı Geliştirici Araçları İle İzleme

Chrome veya Firefox'un "Network" sekmesini kullanarak, yazı tipi değişimleri sırasında kaç adet yeni font dosyasının indirildiğini takip edin. Gereksiz ağ trafiğini önlemek için, sadece kullanılan yazı tiplerini içeren alt kümeleri (subset) yüklemek, sayfa hızınızı önemli ölçüde artıracaktır.

Sonuç

JavaScript ile tarayıcı tabanlı bir sayfa içi yazı tipi özelleştirici oluşturmak, hem kullanıcı dostu bir arayüz sunmanızı sağlar hem de modern web geliştirme pratiklerini pekiştirmenize yardımcı olur. Bu rehberde, DOM manipülasyonundan localStorage kullanımına kadar temel adımları tamamladık. Bir sonraki adım olarak, bu özelleştiriciye "Gece Modu" (Dark Mode) desteği ekleyerek kullanıcı deneyimini daha da zenginleştirmeyi deneyebilirsiniz.

Sorumluluk Reddi: Bu makalede paylaşılan kodlar eğitim amaçlıdır. Üretim ortamında (production) kullanmadan önce, özellikle kullanıcı girdilerinin doğrulanması (sanitization) konusunda gerekli güvenlik testlerini yapmanız ve projenizin özel ihtiyaçlarına göre hata ayıklama süreçlerini tamamlamanız önerilir.