Logomuzun Harfleri Font Değil, Çizim — Ve Bunu Fark Etmemiz Aylar Aldı
Logomuzun harfleri, siteye hiç yüklenmeyen bir fontu istiyordu. Her ziyaretçi logoyu kendi bilgisayarındaki yedek fontla görüyordu. Harfleri fonttan çıkarıp çizime çevirdik: ek yük 0 KB, ilk kare doğru.

Kimse fark etmedi, çünkü bozuk görünmüyordu
Logomuzdaki ad bir SVG'nin içinde metin olarak yazılıydı ve DM Sans fontunu istiyordu. Kodda her şey doğru görünüyordu: font adı yazılı, punto hesaplanmış, harflerin yeri ölçülmüş.
Eksik olan tek şey fontun kendisiydi. 24 Mayıs'taki bir site güncellemesinde DM Sans yüklenen fontların listesinden çıktı; logo ise onu istemeye devam etti. Tarayıcı istenen fontu bulamayınca hata vermez, sessizce yedeğe geçer. Logo Windows'ta Arial'le, macOS'ta Helvetica'yla, Android'de Roboto'yla çiziliyordu.
Hiçbiri bozuk görünmüyor. Bu yüzden 30 Ağustos'a kadar, üç aydan fazla, kimse fark etmedi; biz de dâhil.
Neden önemli: harflerin yeri DM Sans'a göre hesaplanmıştı
Logoyu ortalarken harflerin kutusunu değil, mürekkebin kendisini ölçüyoruz: her harfin sol kenarı, genişliği, yüksekliği. Bu ölçüler DM Sans'tan alınmıştı. Harfleri başka bir font çizince hesap tutmuyordu:
- Logonun merkezi 1,5 birim kayıyordu.
- O dönem harfleri çevreleyen yayla aralarındaki boşluk %10 daralıyordu.
Gözle "bir şey taşmış gibi" duruyordu ama nedeni bulunamıyordu. Kapaktaki iki panelde harflerin yeri aynı, değişen tek şey çizim yöntemi. Soldaki, ziyaretçinin gerçekten gördüğü hâl.
İki çözüm vardı
Fontu yüklemek. Yaklaşık 13 KB ek yük. Daha kötüsü, font inene kadar logo bir an Arial görünür, sonra yerinden oynar. Markanın ilk karesi kendi kendini düzeltmiş olur.
Harfleri çizime çevirmek. Logoda zaten beş harf var. Her harfin şeklini fonttan bir kez okuyup SVG yolu olarak kaydedersek tarayıcının fonta ihtiyacı kalmaz. Ek yük 0 KB, ilk kare doğru.
İkincisini seçtik.
Nasıl yaptık
Küçük bir betik fontu Google Fonts'tan indiriyor, logodaki harflerin şekillerini okuyup koda yol olarak yazıyor. Tek komutla yeniden üretilebiliyor.
Bir ayrıntı bizi şaşırttı: Google Fonts modern tarayıcılara fontu woff2 biçiminde veriyor ve kullandığımız okuyucu bu biçimi açamıyor. Betik bu yüzden kendini eski bir Android tarayıcısı gibi tanıtıp ham ttf dosyasını istiyor.
Eskiden elle ölçtüğümüz harf ölçüleri tablosu da gitti; aynı değerler artık fontun kendi tablolarından geliyor. İki kaynağı karşılaştırdık, en büyük fark binde iki em çıktı.
Çizimin riski: sessiz yalan
Font kullanınca ad değişirse logo da değişir. Çizimde öyle değil: ad değişse bile logo eski adı çizmeye devam eder ve hiçbir şey hata vermez. Daha sinsisi, yolu olmayan bir harf de hata vermez; sadece çizilmez.
Bu yüzden yanına bir nöbetçi test koyduk. Çizimlerin hangi ad için üretildiğini markanın güncel adıyla karşılaştırıyor; uyuşmazsa ya da bir harfin yolu eksikse kırmızıya dönüyor. Testin gerçekten bir şey ölçtüğünden emin olmak için önce bilerek kırdık: markanın adını değiştirdik, üç test kırmızıya döndü. Kırılınca çözüm testi gevşetmek değil, betiği yeniden çalıştırmak.
Sonuç: ölçtük
27 Ekim 2026'da canlı siteden ölçülen değerler:
| Hedef | Ölçülen | |
|---|---|---|
| Mürekkep merkezi | 140 | 140,000 |
| Yay payı | 19 | 19,00 |
| Logodaki metin düğümü | 0 | 0 |
| Sayfada DM Sans isteği | 0 | 0 |
| Ek font yükü | — | 0 KB |
Ders
Tarayıcı istediğiniz fontu bulamazsa size söylemez. Kodda doğru yazılmış bir şey, ekranda doğru çizildiği anlamına gelmez. Ekranda ne çizildiğini ölçmedikçe neyi gösterdiğinizi bilemezsiniz.
Markamızın ilk karesi artık her cihazda aynı. Kendi ürününüzde benzer sessiz hataları birlikte aramak isterseniz bize ulaşın.