E-Ticaret Font Seçimi: Okunabilir ve Hızlı Yazı Tipleri

E-ticaret font seçimi nedir ve satışı nasıl etkiler?

E-ticaret font seçimi, yani online mağazanızda başlık, ürün adı, fiyat ve açıklama metinlerinde kullanacağınız yazı tiplerini okunabilirlik, hız ve marka uyumuna göre belirlemektir. Doğru seçim ürün bilgisinin hızlı okunmasını sağlar. Yanlış seçim ise yükleme süresini uzatır, Türkçe karakterleri bozar ve ziyaretçiyi sepete ulaşmadan kaybettirir.

Bir mağazada ziyaretçi ürünü elleyemez, yalnızca okur. Bu yüzden metin, vitrindeki ışık kadar önemlidir. Yazı tipi fiyatı, stok durumunu ve iade koşulunu anlatan ana araçtır. Dolayısıyla font, süsleme kalemi değil, satış akışının bir parçasıdır.

Bu rehberde ekibimizin e-ticaret projelerinde uyguladığı yaklaşımı aktarıyoruz. Genel tipografi kuralları için web tipografisi rehberimize bakabilirsiniz. Burada yalnızca mağaza sitelerine özgü kararlara odaklanıyoruz.

Örneğin ikinci el kıyafet satan bir mağaza ile teknik ürün satan bir mağaza aynı fontu kullanmak zorunda değildir. Ancak ikisi de aynı soruya cevap vermelidir: ziyaretçi, ürünü ve fiyatı ilk bakışta okuyabiliyor mu? Bu soruya olumlu cevap veremeyen her font, güzel görünse bile mağazanıza zarar verir.

Üstelik font kararı tek seferlik bir iş değildir. Yeni kampanya bantları, yeni kategori sayfaları ve yeni dil seçenekleri eklendikçe kararı yeniden sınarsınız. Bu yüzden e-ticaret font seçimi sürecinde baştan esnek bir tipografi sistemi kurmanız işinizi kolaylaştırır.

E-ticarette okunabilirlik için hangi ölçütlere bakmalısınız?

Okunabilirlik beş ölçüte dayanır: harf formu, boyut, satır aralığı, satır uzunluğu ve kontrast. Bu ölçütlerden biri zayıfsa diğerleri onu kurtarmaz. Örneğin çok şık bir font, küçük boyutta ve düşük kontrastta yine okunmaz.

Ürün sayfasında şu sırayla kontrol etmenizi öneririz:

• Harf formu: "a", "g" ve "1" gibi karakterler net ayrışmalı, "I" ile "l" karışmamalı.
• Boyut: Gövde metni mobilde rahat okunacak büyüklükte olmalı.
• Satır aralığı: Metin blokları sıkışık durmamalı.
• Satır uzunluğu: Çok uzun satırlar gözü yorar, kısa tutmak daha iyidir.
• Kontrast: Metin ile arka plan arasındaki fark yeterli olmalı.

Bu ölçütleri tek tek değil, birlikte test edersiniz. Ekibimiz bunu her projede aynı sırayla yapar. Önce telefonda bakar, sonra tablette, en son masaüstünde kontrol eder. Ayrıca gerçek cihazda bakmak, tasarım aracındaki görüntüden daha doğru sonuç verir.

Kontrast konusunda resmi ölçüt arıyorsanız WCAG yönergelerine bakabilirsiniz. Ayrıntılı kurallar için W3C WCAG kontrast açıklamasını inceleyin. Bu ölçütler engelli ziyaretçiler kadar, güneş altında telefon kullanan herkes için de işe yarar.

Kısacası okunabilirlik bir erişilebilirlik konusu olduğu kadar satış konusudur. Metni okuyamayan ziyaretçi, fiyatı da kargo koşulunu da kaçırır. Bu nedenle kontrast testini tasarım aşamasında yaparsınız, yayından sonra değil.

Ürün sayfasında yazı boyutu ve satır aralığı nasıl olmalı?

Saha tecrübemize dayalı başlangıç aralığı şöyledir: gövde metninde 16 piksel ve üzeri, satır aralığında yazı boyutunun yaklaşık 1,5 katı. Bu değerler garanti değildir; fontun gövde yüksekliğine göre ayarlarsınız. Geniş harfli bir fontta aralığı biraz açmanız gerekebilir.

Ürün başlığı, fiyat ve sepete ekle düğmesi arasında net bir hiyerarşi kurun. Başlık en büyük metin olsun. Fiyat ikinci sırada gelsin. Açıklama ve teknik özellikler daha sakin bir boyutta dursun. Böylece ziyaretçi sayfaya girdiğinde gözünü nereye koyacağını bilir.

Hiyerarşiyi fazla font çeşidiyle değil, boyut ve ağırlık farkıyla kurarsınız. Kalın ve normal ağırlık çoğu mağaza için yeterlidir. Ürün sayfasının genel yapısı için e-ticaret ürün sayfası rehberimize göz atın.

Kampanya etiketlerinde de aynı disiplini koruyun. İndirim yüzdesi ve son gün uyarısı dikkat çekmeli, ancak ürün adıyla yarışmamalı. Örneğin kırmızı ve kalın bir etiket yeterlidir; üç farklı font ve dört renk gerekmez.

Ayrıca ürün varyant seçicilerinde (beden, renk, kapasite) metni küçültmeyin. Bu alanlar parmakla dokunulan alanlardır ve okunamayan bir beden etiketi yanlış sipariş getirir. Dolayısıyla bu bölümlerde de gövde metni kadar net bir boyut kullanırsınız.

E-ticaret font seçimi için serif mi sans-serif mi daha iyi?

Kesin bir kazanan yoktur; ekran okumasında çoğu mağaza sans-serif gövde metniyle daha güvenli sonuç alır. Serif fontlar ise başlıklarda karakter katabilir. Belirleyici olan, fontun sizin ekran boyutlarınızda ve hedef kitlenizde temiz görünmesidir.

Sans-serif fontlar ince detayları az olduğu için küçük ekranlarda net durur. Serif fontlar ise lüks, el yapımı ya da kitap gibi segmentlerde güven ve zarafet hissi verir. Dolayısıyla gövde metninde ince serifli bir fontu küçük boyutta kullanmak riskli olabilir.

E-ticaret font seçimi kararını sezgiyle değil, ürününüze göre verirsiniz. Aşağıdaki tablo genel bir çerçeve sunar.

Tablo bir başlangıç noktasıdır. Son kararı kendi ürün fotoğraflarınızla yan yana deneyerek verirsiniz.

Türkçe karakter desteği e-ticarette neden kritiktir?

Bir font Türkçe karakterleri desteklemezse ğ, ş, ı, İ, ç, ö ve ü harfleri yedek fonta düşer. Yanlış bir e-ticaret font seçimi sonucunda aynı kelimenin içinde iki farklı yazı tipinin görünmesidir. Bu durum mağazanızı özensiz gösterir ve güveni zedeler. Üstelik ziyaretçi sorunun nedenini bilmez; yalnızca sitenin güvenilmez olduğunu düşünür. Bu nedenle Türkçe karakter testini tasarımın ilk günü yaparsınız.

MDN belgelerine göre Türkçeye özgü karakterler Latin Extended-A bloğunda yer alır (U+0100 ile U+017F aralığı). Ayrıca ğ, ş ve ı karakterleri bu blokta yer alır. Bu yüzden font seçerken "Latin Extended" desteği olduğunu doğrulamanız gerekir. Kaynak: MDN unicode-range belgesi.

Denemeyi kolaylaştırmak için şu test cümlesini kullanın: "Pijamalı hasta yağız şoföre çabucak güvendi." Bu cümle Türkçenin özel harflerini birlikte taşır. Ürün adı, kategori menüsü ve fiyat etiketinde bu cümleyi deneyin.

Sorun yalnızca görsel değildir. Eksik glifli bir font, arama kutusundaki yazıyı ve filtre etiketlerini de bozar. Örneğin ziyaretçi "çanta" yazdığında kutuda farklı bir font görünürse, site kırık izlenimi verir.

Üstelik ödeme sayfasında bu güven kaybı daha da pahalıdır. Kart bilgisi girilen ekranda tutarsız harfler görmek ziyaretçiyi tereddüde sokar. Bu yüzden e-ticaret font seçimi testini yalnızca ana sayfada değil, sepet ve ödeme adımlarında da yaparsınız.

Büyük harf ve İ sorununu nasıl çözersiniz?

CSS ile metni büyük harfe çevirdiğinizde Türkçedeki "i" harfi yanlış dönüşebilir. Doğru sonuç için sayfanın dil bilgisini belirtirsiniz. HTML etiketinde lang="tr" kullanırsanız tarayıcı "i" harfini "İ" olarak büyütür.

Bu ayrıntı özellikle kategori adlarında ve kampanya bantlarında ortaya çıkar. Örneğin "İNDİRİM" yazan bir bant yanlış harfle çıkarsa, bütün kampanya özensiz durur. "İndirim" kelimesinin "Indirim" diye çıkması, küçük bir hatadır ama marka algısını bozar. Ayrıca çok dilli mağazalarda her dil bölümüne kendi lang değerini vermelisiniz.

Kontrol listesine şunları ekleyin:

• Sayfanın ana dilini lang özniteliğiyle belirttiniz mi?
• Büyük harfe çevirdiğiniz alanlarda "İ" ve "ı" doğru çıkıyor mu?
• Fontun büyük "İ" glifi noktalı mı?

Başlık ve gövde için kaç font yeterlidir?

Çoğu mağaza için iki font yeterlidir: biri başlıklar, biri gövde metni için. Hatta tek bir font ailesinin farklı ağırlıkları bile işe yarar. Font sayısı arttıkça hem yükleme süresi hem görsel karmaşa artar.

Eşleştirmede basit bir kural uygulayın. Bir fontu nötr seçin, diğerini karakterli seçin. İki karakterli font yan yana geldiğinde birbirleriyle yarışır. Örneğin bir geometrik başlık fontunu sade bir gövde fontuyla eşleştirebilirsiniz.

Kurumsal kimliğiniz varsa önce onun font kararına bakın. Ancak kimlik rehberindeki font web için uygun olmayabilir; bu durumda yakın bir web fontu seçersiniz. Marka tarafında destek için marka kimliği hizmetimize başvurabilirsiniz.

Font ağırlığını da bir tasarım kararı olarak düşünün. Örneğin başlıkta yarı kalın, gövdede normal ağırlık çoğu zaman yeterli kontrastı verir. Ekstra ince ya da ekstra kalın ağırlıklar ise ayrı dosyalar demektir.

Yani her ağırlığın bir bedeli vardır. Kullanmayacağınız ağırlığı projeye eklemezsiniz. Sonradan ihtiyaç duyarsanız eklemek, baştan şişirip sonra temizlemekten kolaydır.

Fiyat ve rakamlarda hangi font özellikleri önemlidir?

Fiyat, mağazada en çok okunan metindir; bu yüzden rakamların net ve hizalı görünmesi gerekir. Sabit genişlikli rakamlar (tabular figures) fiyat listelerinde ve sepet tablosunda sütunların düzgün hizalanmasını sağlar. CSS'te font-variant-numeric: tabular-nums ile açarsınız.

Bazı fontların eski stil rakamları (old-style) vardır ve satır içinde inip çıkar. Bu tür rakamlar kitap sayfasında güzel durur, fakat fiyat etiketinde okunmayı yavaşlatır. Fiyat alanında aynı yüksekliğe sahip rakamları tercih edin.

Ayrıca TL simgesinin fontta bulunup bulunmadığını kontrol edin. Fontun desteklemediği simge yedek fonta düşer ve fiyatın yanında farklı bir karakter olarak görünür. Bu nedenle ₺ işaretini gerçek tarayıcıda denemelisiniz.

Karşılaştırma tablolarında da aynı kural geçerlidir. Sütunlardaki fiyatlar sağa hizalıysa ve rakamlar eşit genişlikteyse, ziyaretçi hangi ürünün ucuz olduğunu anında görür. Hizasız rakamlar ise gözü yorar.

Örnek olarak indirimli fiyatı, üstü çizili eski fiyatla yan yana gösterdiğinizi düşünün. İki fiyat arasında boyut ve ağırlık farkı net değilse, ziyaretçi hangisinin güncel fiyat olduğunu tereddütle okur. Bu nedenle güncel fiyatı her zaman daha belirgin tutarsınız.

Web fontları sayfa hızını nasıl etkiler?

Her web fontu ek bir dosya indirmek demektir. Dosya büyüdükçe metin geç açılır ya da sayfa kayar. Bu gecikmeyi özellikle mobil bağlantıda hissedersiniz. Hız, hem kullanıcı deneyimini hem arama sıralamasını etkilediği için e-ticaret font seçimi aynı zamanda bir performans kararıdır.

Google'ın web.dev rehberi, font yüklemesini hızlandırmak için şu adımları sayar: yalnızca WOFF2 kullanmak, fontları alt kümeye ayırmak, font sayısını azaltmak ve font-display değerini doğru seçmek. Ayrıntılar için web.dev font en iyi uygulamaları sayfasına bakabilirsiniz.

Genel hız konusunda site hızı SEO'yu nasıl etkiler yazımız da yardımcı olur. Görsellerle birlikte düşünürseniz kazancınız büyür; bunun için görsel optimizasyonu rehberimizi okuyun.

Mobil kullanıcı, masaüstü kullanıcıdan daha sabırsızdır. Bu yüzden font dosyalarını indirme sırasına göre planlarsınız: önce görünür alandaki metin, sonra geri kalanı. Sayfa ilk ekranda metni hızla gösteriyorsa, ziyaretçi sayfanın yüklendiğini düşünür.

Örneğin ekibimiz bir mağaza projesinde fontları elden geçirdiğinde, önce hangi font dosyalarının gerçekten kullanıldığını listeler. Çoğu zaman projede hiç kullanılmayan ağırlıklar çıkar. Bunları silmek, sıfır tasarım kaybıyla hız kazandırır.

font-display swap mı optional mı olmalı?

Hız öncelikliyse optional, markanın fontu öncelikliyse swap iyi bir başlangıçtır. web.dev'e göre optional değeri metnin yaklaşık 100 milisaniye içinde görünmesini sağlar ve yerleşim kaymasını önler; ancak web fontu hiç kullanılmayabilir. Swap ise metni hemen gösterir, font geç gelirse görünümü değiştirir.

Mağaza sitelerinde kararı sayfa türüne göre verirsiniz. Ürün listeleme gibi hız kritik sayfalarda optional mantıklıdır. Marka kimliğinin güçlü olduğu açılış sayfasında ise swap ile fontu garantilersiniz. Yine de her iki durumda da yedek fontu web fontuna benzer seçmelisiniz. Bu küçük ayar, ziyaretçinin fark etmeyeceği kadar sessiz bir kazanç sağlar.

Yedek fontu eşlemek için size-adjust gibi CSS tanımları kullanabilirsiniz. web.dev bu yöntemi, font değişiminde oluşan yerleşim kaymasını azaltmak için önerir. Böylece swap kullansanız bile ekran sıçramaz.

WOFF2 ve alt kümeleme nasıl yapılır?

WOFF2, web için önerilen biçimdir; web.dev'e göre WOFF'tan yaklaşık yüzde 30 daha iyi sıkıştırır ve artık her yerde desteklenir. Yani ek bir biçime ihtiyacınız yoktur. Font dosyalarını WOFF2 olarak sunarsınız ve eski biçimleri bırakırsınız.

Alt kümeleme ise fontun yalnızca kullandığınız karakterlerini tutmaktır. Türkçe bir mağaza için temel Latin ve Latin Extended-A karakterleri çoğu zaman yeterlidir. Böylece Kiril ya da Yunanca gibi gereksiz glifler dosyadan çıkar.

Adımları şöyle uygularsınız:

• Fontun lisansının alt kümelemeye izin verdiğini kontrol edin.
• Gerekli Unicode aralıklarını belirleyin (Türkçe için Latin ve Latin Extended-A).
• Aracınızla WOFF2 dosyasını üretin.
• @font-face içinde unicode-range tanımlayın.
• Sayfada ğ, ş, ı, İ karakterlerini gözle doğrulayın.

Alt kümeleme yaparken lisansa dikkat edin. Bazı fontların lisansı dosyayı değiştirmeye izin vermez. Açık lisanslı fontlarda bu sorun genellikle yoktur; yine de lisans metnini okumanızı öneririz.

Kısacası e-ticaret font seçimi sürecinde alt kümeleme hızlı kazançtır, ancak kalıcı bir süreç gerektirir. Siteye yeni bir dil eklediğinizde ya da ₺ gibi yeni bir simge kullandığınızda alt kümeyi güncellersiniz. Aksi halde yeni eklenen karakterler yedek fonta düşer.

Değişken fontlar e-ticarette işe yarar mı?

Evet, birden fazla ağırlık kullanıyorsanız işe yarar. web.dev'e göre değişken font, birçok stili tek dosyada toplar. Normal, yarı kalın ve kalın ağırlık için üç ayrı dosya yerine tek dosya indirirsiniz.

Ancak tek ağırlık kullanıyorsanız kazanç küçüktür. Değişken dosya bazen tek bir statik dosyadan büyük olabilir. Bu yüzden önce hangi ağırlıkları gerçekten kullandığınızı sayın. Çoğu mağazada iki ya da üç ağırlık yeterlidir.

Karar vermek için dosya boyutlarını karşılaştırın. Ayrıca değişken font desteği olan alt kümeyi Türkçe karakterlerle birlikte test edin. Bazı dağıtımlar yalnızca temel Latin ile gelir; bu durumda ğ ve ş harfleri eksik kalır.

Google Fonts mu kendi sunucunuz mu daha iyi?

Her iki yol da çalışır; doğru seçim altyapınıza bağlıdır. Google Fonts kurulumu kolaylaştırır ve geniş bir yazı tipi seçkisi sunar. web.dev'e göre Google Fonts için iki preconnect ipucu eklemeniz gerekir: fonts.googleapis.com ve crossorigin ile fonts.gstatic.com.

Kendi sunucunuzdan sunmak ise üçüncü taraf bağlantısını azaltır. Ancak web.dev, kendi sunucudan yayının ancak CDN ve HTTP/2 ile daha iyi performans verdiğini belirtir. Dolayısıyla geçiş yapmadan önce ölçmeniz gerekir.

Gizlilik açısından da ekibinizle konuşun. Harici font sağlayıcısına yapılan istekler bazı hukuki değerlendirmelerde gündeme gelir. Bu konuda uzman hukuk görüşü almanızı öneririz. Teknik tarafta ise iki yöntemi de ölçüp karar vermek en sağlıklı yoldur.

Font yüklemesi Core Web Vitals'ı nasıl etkiler?

Font yüklemesi iki metriği etkiler: LCP ve CLS. Sayfanın en büyük metin bloğu web fontuyla geliyorsa, font geç indiğinde LCP gecikir. Yedek fontla web fontunun ölçüleri farklıysa, değişim anında içerik kayar ve CLS artar.

Bu nedenle kritik fontu erken keşfettirmek gerekir. web.dev, @font-face kurallarını head içine almayı ve dikkatli preload kullanmayı önerir. Ancak preload, tarayıcının diğer kaynaklara ayırdığı gücü de alır; bu yüzden yalnızca en kritik bir ya da iki fontu işaretleyin.

Metrikleri nasıl okuyacağınızı öğrenmek için Core Web Vitals rehberimize bakın. Script kaynaklı gecikmeler için JavaScript ve site hızı yazımız tamamlayıcıdır.

Yerleşim kaymasını sınamak için Lighthouse gibi bir araç kullanın. Kurulum ve okuma için Lighthouse ile site performans testi yazımıza bakın. Yine de tek seferlik bir test yetmez; gerçek kullanıcı verisi en doğru sonucu verir.

Örneğin sayfa masaüstünde sorunsuz görünürken, yavaş mobil bağlantıda başlıklar kayabilir. Bu nedenle testleri yavaş ağ koşullarında tekrarlarsınız. Böylece sorunu kullanıcı yaşamadan önce yakalarsınız. Ayrıca her tasarım değişikliğinden sonra testi tekrarlamayı alışkanlık haline getirin.

Sistem fontu kullanmak mantıklı mıdır?

Evet, hız ve sadelik önemliyse mantıklıdır. web.dev, gövde metni için system-ui gibi sistem fontlarının indirme gerektirmediğini belirtir. Yani metin anında açılır ve yerleşim kayması olmaz.

Sistem fontunun dezavantajı, görünümün cihaza göre değişmesidir. Android, iOS ve masaüstünde aynı yazı tipini görmezsiniz. Bu, marka kimliği güçlü mağazalar için sorun olabilir. Öte yandan fiyat odaklı, büyük kataloglu mağazalarda bu fark çoğu zaman önemsizdir.

Melez bir yol da kullanabilirsiniz: başlıkta marka fontunu, gövdede sistem fontunu seçin. Böylece markanızı korur, yükü de azaltırsınız. Ayrıca gövde metni ürün açıklamalarında en çok yer kaplayan kısım olduğu için kazanç belirgindir.

Kararı verirken kendi ziyaretçi verinize bakın. Trafiğinizin çoğu mobilden geliyorsa, sistem fontu sizi daha fazla rahatlatır. Buna karşılık marka bilinirliği yüksekse, özel font ekstra yükü haklı çıkarabilir. Yani ölçüm yapmadan ne kesin evet ne kesin hayır demeniz gerekir.

Mobilde font seçimi nasıl olmalıdır?

Mobilde ziyaretçiniz parmakla gezinir, güneş altında okur ve hızlı kaydırır. Bu yüzden font büyük, kontrast güçlü ve satırlar kısa olmalıdır. Masaüstünde güzel görünen ince ağırlık, telefonda silik kalabilir.

Mobil öncelikli yaklaşımla başlayın. Önce küçük ekranda okunabilirliği çözün, sonra büyük ekrana uyarlayın. Bu yöntemi mobil öncelikli tasarım yazımızda anlattık.

Mobil testte şu noktalara bakın:

• Ürün adı iki satıra sarıyorsa bozulmadan sarıyor mu?
• Fiyat ve indirim etiketi tek bakışta anlaşılıyor mu?
• Sepet düğmesindeki metin parmakla rahat hedeflenecek kadar büyük mü?
• Yavaş bağlantıda metin önce yedek fontla geliyor mu?

Mobil ekranda satır uzunluğu doğal olarak kısadır; bu iyi bir şeydir. Buna karşılık masaüstünde çok geniş metin alanları açarsanız okunabilirlik düşer. Bu yüzden açıklama metnini uygun bir genişlikte sınırlarsınız.

Ayrıca kullanıcının sistem ayarlarından yazı boyutunu büyüttüğünü unutmayın. Sabit piksel değerleriyle kilitlenmiş bir tasarım bu ayara uymaz. Bu nedenle mümkün olduğunda göreli birimler kullanır ve sayfayı büyütülmüş yazıyla test edersiniz.

E-ticaret font seçimi marka kimliğiyle nasıl uyumlanır?

Font, markanın sesidir. Teknoloji mağazası net ve düz konuşur; butik bir mağaza daha sıcak ve kişisel konuşur. Bu ton farkını yazı tipinde de hissedersiniz. Yine de marka kimliği ile okunabilirlik çatışırsa, okunabilirlik kazanmalıdır.

Bunu çözmenin yolu, marka fontunu yalnızca logoda ve ana başlıklarda kullanmaktır. Ürün listesi, filtre, sepet ve ödeme gibi işlevsel alanlarda ise nötr bir font seçersiniz. Böylece kimliği korur, satın alma akışını sadeleştirirsiniz.

Görsel dilin bütünü için e-ticarette görsel dil ve kullanıcı deneyimi yazımıza bakın. Font kararlarını site tasarımının geri kalanıyla birlikte ele almak istiyorsanız web tasarım hizmetimiz bu konuda yanınızdadır.

Marka fontunu web için satın alıyorsanız, lisansın web kullanımını da kapsadığından emin olun. Baskı için satın aldığınız bir lisans, çoğu zaman web yayınını kapsamaz. Bu ayrıntıyı atlamak sonradan hukuki sorun yaratabilir.

Kısacası e-ticaret font seçimi, marka fontu ile performans arasında denge kurmaktır. Marka fontu ağırsa, yalnızca gerekli ağırlıkları ve karakterleri yüklersiniz. Böylece kimliğinizden ödün vermeden hızı korursunuz.

E-ticaret için hangi fontlar güvenli bir başlangıçtır?

Aşağıdaki fontlar Google Fonts üzerinde yaygındır ve genellikle Latin Extended desteğiyle gelir. Yine de yayına almadan önce Türkçe test cümlesiyle kendiniz doğrulamalısınız. Bu liste bir öneri başlangıcıdır, garanti değildir.

Bir fontu seçmeden önce ürün sayfanızda gerçek içerikle deneyin. Lorem ipsum ile güzel görünen bir font, gerçek ürün adıyla taşabilir. Ayrıca kullanacağınız ağırlıkları baştan belirleyin ki dosya sayısı şişmesin.

Bir fontu seçtikten sonra onu en az bir hafta gerçek ziyaretçi verisiyle izleyin. Örneğin sepete ekleme oranı ve çıkış oranı aynı kalıyorsa, değişiklik güvenli demektir. Düşüş görürseniz eski sürüme dönebilmek için değişikliği tek bir CSS dosyasında tutun.

Ayrıca seçtiğiniz fontu tüm şablonlarda denemeyi unutmayın. Ürün sayfası güzel görünürken, kategori listesi ya da e-posta şablonu bozuk çıkabilir. Yani e-ticaret font seçimi testi sayfa sayfa değil, şablon şablon ilerler.

Yazı tipi değiştirici aracı site fontu seçmeye yarar mı?

Hayır, yaramaz; bu araç farklı bir iş içindir. Yazı tipi aracımız Unicode karakterleriyle Instagram biyografisi, gönderi ya da başlık için süslü metin üretir. Bu metin gerçek bir web fontu değildir.

Mağaza sitenizin gövdesinde bu tür Unicode süslü metinleri kullanmamalısınız. Ekran okuyucular bu karakterleri yanlış okur ve arama motorları metni anlamlandıramaz. Site fontunuzu her zaman CSS ile tanımlarsınız.

Sosyal medya hesaplarında kampanya duyurusu için aracı kullanabilirsiniz; örneğin biyografide dikkat çekici bir başlık yazabilirsiniz. Ancak ürün adı ve açıklamalarında sade metin kalsın. Böylece hem erişilebilirlik hem SEO açısından güvende olursunuz.

Yayına almadan önce font kontrol listesi nedir?

Yayından önce son bir tur atmanız gerekir. Aşağıdaki liste, ekibimizin mağaza lansmanlarında kullandığı kontrolleri özetler. Hepsini gerçek cihazlarda ve yavaş bağlantı simülasyonunda denemelisiniz.

• Türkçe test cümlesi tüm metin alanlarında doğru çıkıyor mu?
• Yalnızca WOFF2 dosyalarını mı sunuyorsunuz?
• Kullanmadığınız ağırlık ve stilleri kaldırdınız mı?
• font-display değerini sayfa türüne göre seçtiniz mi?
• Yedek font için size-adjust gibi bir ayar var mı?
• Fiyat alanında sabit genişlikli rakamlar açık mı?
• Kategori başlıklarında "İ" harfi doğru büyüyor mu?
• Font değişikliğinden sonra Core Web Vitals değerlerini yeniden ölçtünüz mü?

Yayından sonra da dönüşüm oranını izleyin. Font değişikliğinin etkisini görmek için dönüşüm oranı hesaplama aracımızı kullanabilirsiniz. Mağaza genelinde destek isterseniz e-ticaret danışmanlığı hizmetimizi inceleyin.