Yazı tipleriyle ilgili en iyi uygulamalar

Web yazı tiplerini Core Web Vitals için optimize edin.

Katie Hempenius
Katie Hempenius
X
Barry Pollard

Bu makalede, yazı tipleri için en iyi performans uygulamaları ele alınmaktadır. Web yazı tiplerinin performansı etkilediği çeşitli yöntemler vardır:

Bu makale üç bölüme ayrılmıştır: yazı tipi yükleme, yazı tipi teslimi ve yazı tipi oluşturma. Her bölümde, yazı tipi yaşam döngüsünün bu belirli unsurunun nasıl işlediği açıklanmakta ve ilgili en iyi uygulamalar sunulmaktadır.

Yazı tipi yükleniyor

Yazı tipleri genellikle önemli kaynaklardır. Bunlar olmadan kullanıcı sayfa içeriğini görüntüleyemeyebilir. Bu nedenle, yazı tipi yüklemeye ilişkin en iyi uygulamalar genellikle yazı tiplerinin mümkün olduğunca erken yüklendiğinden emin olmaya odaklanır. Bu yazı tipi dosyalarını indirmek için ayrı bağlantı ayarları gerektiğinden, üçüncü taraf sitelerinden yüklenen yazı tiplerine özellikle dikkat edilmelidir.

Sayfanızdaki yazı tiplerinin zamanında istenip istenmediğinden emin değilseniz daha fazla bilgi için Chrome Geliştirici Araçları'ndaki Ağ panelinde Zamanlama sekmesini kontrol edin.

Geliştirici Araçları'ndaki Zamanlama sekmesinin ekran görüntüsü

@font-face konusunu anlama

Yazı tipi yüklemeyle ilgili en iyi uygulamalara geçmeden önce, @font-face'in nasıl çalıştığını ve bunun yazı tipi yüklemesini nasıl etkilediğini anlamanız önemlidir.

@font-face bildirimi, herhangi bir web yazı tipiyle çalışmanın temel bir parçasıdır. En azından, yazı tipini belirtmek için kullanılacak adı belirtir ve ilgili yazı tipi dosyasının konumunu belirtir.

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}

Sık karşılaşılan bir yanlış kanı, @font-face bildirimiyle karşılaşıldığında yazı tipinin istenmesi gerektiğidir. Bu doğru değildir. @font-face bildirimi tek başına yazı tipi indirme işlemini tetiklemez. Bunun yerine, bir yazı tipi yalnızca sayfada kullanılan stil tarafından referans gösteriliyorsa indirilir. Örneğin, aşağıdaki gibi:

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}

h1 {
  font-family: "Open Sans"
}

Diğer bir deyişle, yukarıdaki örnekte Open Sans yalnızca sayfa bir <h1> öğesi içeriyorsa indirilir.

Dolayısıyla, yazı tipi optimizasyonunu düşünürken stil sayfalarına, yazı tipi dosyalarının kendisi kadar dikkat etmek önemlidir. Stil sayfalarının içeriğini veya teslimini değiştirmek, yazı tiplerinin ne zaman geleceğine ilişkin önemli bir etki yaratabilir. Benzer şekilde, kullanılmayan CSS'yi kaldırmak ve stil sayfalarını bölmek de bir sayfa tarafından yüklenen yazı tipi sayısını azaltabilir.

Satır içi yazı tipi bildirimleri

Çoğu site, yazı tipi açıklamalarını ve diğer kritik stilleri harici bir stil sayfasına eklemek yerine ana dokümanın <head> bölümüne satır içi olarak eklemekten büyük fayda sağlar. Böylece tarayıcı, harici stil sayfasının indirilmesini beklemek zorunda kalmaz ve yazı tipi bildirimlerini daha erken keşfeder.

<head>
  <style>
    @font-face {
        font-family: "Open Sans";
        src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
    }

    body {
        font-family: "Open Sans";
    }

    ...etc.

  </style>
</head>

Kritik CSS'leri satır içine almak, tüm sitelerin ulaşamayacağı daha gelişmiş bir teknik olabilir. Performansın avantajları nettir ancak CSS'nin (ideal olarak da yalnızca kritik CSS'nin) doğru şekilde satır içine alınmasını ve ek CSS'lerin oluşturulmayı engellemeyen bir şekilde yayınlanmasını sağlamak için ek işlemler ve derleme araçları gerektirir.

Kritik üçüncü taraf kaynaklarına önceden bağlanma

Siteniz yazı tiplerini bir üçüncü taraf sitesinden yüklüyorsa üçüncü taraf kaynaklı kaynakla erken bağlantılar kurmak için preconnect kaynak ipucunu kullanmanız önemle tavsiye edilir. Kaynak ipuçları, dokümanın <head> bölümüne yerleştirilmelidir. Aşağıdaki kaynak ipucu, yazı tipi stil sayfasını yüklemek için bir bağlantı oluşturur.

<head>
  <link rel="preconnect" href="https://fonts.com">
</head>

Yazı tipi dosyasını indirmek için kullanılan bağlantıyı önceden bağlamak için crossorigin özelliğini kullanan ayrı bir preconnect kaynak ipucu ekleyin. Stil sayfalarından farklı olarak, yazı tipi dosyalarının CORS bağlantısı üzerinden gönderilmesi gerekir.

<head>
  <link rel="preconnect" href="https://fonts.com">
  <link rel="preconnect" href="https://fonts.com" crossorigin>
</head>

preconnect kaynak ipucunu kullanırken bir yazı tipi sağlayıcısının farklı kaynaklardan stil sayfaları ve yazı tipleri sunabileceğini unutmayın. Örneğin, preconnect kaynak ipucu Google Fonts için bu şekilde kullanılır.

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
</head>

Yazı tiplerini yüklemek için preload kullanırken dikkatli olun

preload, yazı tiplerini sayfa yükleme işleminin başlarında keşfedilebilir hale getirmede son derece etkili olsa da, tarayıcı kaynaklarının diğer kaynakların yüklenmesinden devre dışı bırakılmasına neden olur.

Yazı tipi bildirimlerini satır içine almak ve stil sayfalarını ayarlamak daha etkili bir yaklaşım olabilir. Bu düzenlemeler, bir geçici çözüm sunmak yerine geç keşfedilen yazı tiplerinin temel nedenini ortadan kaldırmaya daha yakındır.

Ayrıca, yazı tipi yükleme stratejisi olarak preload, tarayıcının yerleşik içerik müzakere stratejilerinden bazılarını atladığından dikkatli bir şekilde kullanılmalıdır. Örneğin preload, unicode-range bildirimlerini yoksayar ve dikkatli bir şekilde kullanılırsa yalnızca tek bir yazı tipi biçimini yüklemek için kullanılmalıdır.

Bununla birlikte, harici stil sayfaları kullanılırken tarayıcı, yazı tipinin gerekli olup olmadığını çok ileri bir tarihe kadar tespit edemeyeceği için en önemli yazı tiplerini önceden yüklemek çok etkili olabilir.

Yazı tipi teslimi

Yazı tiplerinin daha hızlı gönderilmesi, metinlerin daha hızlı oluşturulmasını sağlar. Buna ek olarak, bir yazı tipi yeterince erken dağıtılırsa yazı tipi değiştirme işleminden kaynaklanan düzen kaymalarının da önüne geçilebilir.

Kendi bünyesinde barındırılan yazı tiplerini kullanma

Kağıt üzerinde, kendiliğinden barındırılan bir yazı tipi kullanmak üçüncü taraf bağlantı kurulumunu ortadan kaldırdığı için daha iyi performans sağlayacaktır. Ancak pratikte, bu iki seçenek arasındaki performans farklılıkları daha kesin değildir: Örneğin, Web Almanağı, üçüncü taraf yazı tiplerini kullanan sitelerin, birinci taraf yazı tiplerini kullanan yazı tiplerine göre daha hızlı bir oluşturma işlemine sahip olduğunu tespit etti.

Kendi bünyesinde barındırılan yazı tiplerini kullanmayı düşünüyorsanız sitenizin bir İçerik Yayınlama Ağı (CDN) ve HTTP/2 kullandığından emin olun. Bu teknolojiler kullanılmadığında, kendi kendine barındırılan yazı tiplerinin daha iyi performans sağlama olasılığı çok daha düşüktür. Daha fazla bilgi için İçerik Yayınlama Ağları başlıklı makaleyi inceleyin.

Kendi bünyesinde barındırılan bir yazı tipi kullanıyorsanız üçüncü taraf yazı tipi sağlayıcılarının genellikle otomatik olarak sağladığı yazı tipi dosyası optimizasyonlarından bazılarını (yazı tipi alt ayarı ve WOFF2 sıkıştırması gibi) uygulamanız da önerilir. Bu optimizasyonları uygulamak için gereken çaba, sitenizin desteklediği dillere bağlıdır. Özellikle, CJK dilleri için yazı tiplerini optimize etmenin özellikle zor olabileceğini unutmayın.

WOFF2'yi kullan

Modern yazı tipleri arasında en yeni olan WOFF2, en geniş tarayıcı desteğine sahiptir ve en iyi sıkıştırmayı sunar. WOFF2, Brotli'yi kullandığı için WOFF'dan% 30 daha iyi sıkıştırır. Bu sayede, daha az veri indirilmesine ve dolayısıyla daha hızlı performansa neden olur.

Tarayıcı desteği sayesinde, uzmanlar artık yalnızca WOFF2'nin kullanılmasını öneriyor:

Aslında, yalnızca WOFF2\'yi kullanın ve geri kalan her şeyi unutun demenin zamanının geldiğini düşünüyoruz.

Bu yöntem, CSS'nizi ve iş akışınızı büyük ölçüde basitleştirir. Ayrıca, yanlışlıkla iki kez veya yanlış yazı tipi indirmelerini önler. WOFF2 artık her yerde destekleniyor. Dolayısıyla, gerçekten eski tarayıcıları desteklemeniz gerekmiyorsa WOFF2'yi kullanın. Bunu yapamıyorsanız, bu eski tarayıcılara hiçbir web yazı tipi sunmamayı düşünün. Güçlü bir yedek stratejiniz varsa bu durum sorun yaratmaz. Eski tarayıcıları kullanan ziyaretçiler yalnızca yedek yazı tiplerinizi görür.

Bram Stein, 2022 Web Almanağı'ndan

Alt küme yazı tipleri

Yazı tipi dosyalarında genellikle destekledikleri çeşitli karakterlerin tümü için çok sayıda glif bulunur. Ancak, sayfanızdaki tüm karakterlere ihtiyacınız olmayabilir ve yazı tiplerini alt gruplara ayırarak yazı tipi dosyalarının boyutunu azaltabilirsiniz.

@font-face bildirimindeki unicode-range açıklayıcısı, tarayıcıya bir yazı tipinin hangi karakterler için kullanılabileceğini bildirir.

@font-face {
    font-family: "Open Sans";
    src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
    unicode-range: U+0025-00FF;
}

Sayfa unicode aralığıyla eşleşen bir veya daha fazla karakter içeriyorsa yazı tipi dosyası indirilir. unicode-range, sayfa içeriği tarafından kullanılan dile bağlı olarak farklı yazı tipi dosyaları sunmak için yaygın olarak kullanılır.

unicode-range genellikle alt gruplara ayırma tekniğiyle birlikte kullanılır. Bir alt küme yazı tipi, orijinal yazı tipi dosyasında bulunan gliflerin daha küçük bir bölümünü içerir. Örneğin, bir site tüm kullanıcılara tüm karakterleri sunmak yerine, Latin ve Kiril karakterleri için ayrı alt küme yazı tipleri oluşturabilir. Yazı tipi başına glif sayısı büyük farklılıklar gösterir: Latin yazı tipleri genellikle yazı tipi başına 100 ila 1.000 glif büyüklüğündedir. CJK yazı tipleri 10.000'den fazla karakter içerebilir. Kullanılmayan gliflerin kaldırılması, yazı tiplerinin dosya boyutunu önemli ölçüde küçültebilir.

Bazı yazı tipi sağlayıcıları, farklı alt kümelere sahip yazı tipi dosyalarının farklı sürümlerini otomatik olarak sağlayabilir. Örneğin, Google Fonts bunu varsayılan olarak yapar:

/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJbecnFHGPezSQ.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecnFHGPezSQ.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Kendi kendine barındırmaya geçiş yapıldığında bu, kolayca gözden kaçabilecek ve yerel olarak daha büyük yazı tipi dosyalarının oluşturulmasına yol açabilecek bir optimizasyondur.

Yazı tipi sağlayıcınız izin veriyorsa yazı tiplerini manuel olarak alt gruplara ayırmak da mümkündür. Bunun için bir API aracılığıyla (Google Fonts bunu text parametresi sağlayarak destekler) veya yazı tipi dosyalarını manuel olarak düzenleyip kendiliğinden barındırabilir. Yazı tipi alt kümeleri oluşturmaya yönelik araçlar arasında subfont ve glyphanger bulunur. Ancak alt ayarlara ve kendi kendine barındırmaya izin vermek için kullandığınız yazı tiplerinin lisansını kontrol edin.

Daha az web yazı tipi kullanın

Yayınlanma en hızlı yazı tipi, her şeyden önce istenmeyen bir yazı tipidir. Sistem yazı tipleri ve değişken yazı tipleri, sitenizde kullanılan web yazı tiplerinin sayısını potansiyel olarak azaltmanın iki yoludur.

Sistem yazı tipi, bir kullanıcı cihazının kullanıcı arayüzü tarafından kullanılan varsayılan yazı tipidir. Sistem yazı tipleri genellikle işletim sistemine ve sürüme göre değişiklik gösterir. Yazı tipi zaten yüklü olduğu için indirilmesine gerek yoktur. Sistem yazı tipleri özellikle gövde metninde iyi sonuç verebilir.

CSS'nizde sistem yazı tipini kullanmak için yazı tipi ailesi olarak system-ui'i listeleyin:

font-family: system-ui

Değişken yazı tiplerinin ardındaki fikir, tek bir değişken yazı tipinin birden fazla yazı tipi dosyasının yerine kullanılabilir olmasıdır. Değişken yazı tipleri, "varsayılan" bir yazı tipi stili tanımlanarak ve yazı tipini değiştirmek için "eksenler" sağlayarak çalışır. Örneğin, daha önce açık, normal, kalın ve ekstra kalın için ayrı yazı tipleri gerektiren harfler uygulamak için Weight eksenine sahip değişken bir yazı tipi kullanılabilir.

Değişken yazı tiplerine geçmek herkesin işine yaramaz. Değişken yazı tipleri çok sayıda stil içerir. Bu nedenle, genellikle dosya boyutları, yalnızca tek bir stil içeren değişken olmayan yazı tiplerine göre daha büyük olur. Değişken yazı tipleri kullanıldığında en çok iyileşme görülen siteler, çeşitli yazı tipi stilleri ve ağırlıkları kullanan (ve bunların kullanılması gereken) sitelerdir.

Yazı tipi oluşturma

Henüz yüklenmemiş bir web yazı tipiyle karşılaştığında, tarayıcı bir ikilemle karşılaşır: Metin oluşturmayı web yazı tipi gelene kadar beklemeli midir? Yoksa web yazı tipi gelene kadar metni yedek yazı tipinde mi oluşturur?

Farklı tarayıcılar bu senaryoyu farklı şekilde ele alır. Varsayılan olarak, Chromium tabanlı ve Firefox tarayıcılar, ilişkili web yazı tipi yüklenmediyse metin oluşturmayı 3 saniyeye kadar engeller. Safari, metin oluşturmayı süresiz olarak engeller.

Bu davranış, font-display özelliği kullanılarak yapılandırılabilir. Bu seçimin önemli etkileri olabilir: font-display; LCP, FCP ve düzen kararlılığını etkileyebilir.

Uygun bir font-display stratejisi seçin

font-display, ilişkilendirilmiş web yazı tipi yüklenmediğinde tarayıcıya metin oluşturma işlemine nasıl devam etmesi gerektiğini bildirir. Her yazı tipine göre tanımlanır.

@font-face {
  font-family: Roboto, Sans-Serif
  src: url(/fonts/roboto.woff) format('woff'),
  font-display: swap;
}

font-display için beş olası değer vardır:

Değer Engelleme süresi Değiştirme dönemi
Otomatik Tarayıcıya göre değişir Tarayıcıya göre değişir
Engelle 2-3 saniye Sonsuz
Değiştir 0 ms. Sonsuz
Fallback 100 ms 3 saniye
İsteğe bağlı 100 ms Yok
  • Engelleme süresi: Engelleme süresi, tarayıcı bir web yazı tipi istediğinde başlar. Engelleme süresi boyunca, web yazı tipi kullanılamıyorsa yazı tipi görünmez bir yedek yazı tipinde oluşturulur. Bu nedenle, metin kullanıcı tarafından görülemez. Yazı tipi, engelleme döneminin sonunda kullanılabilir değilse yedek yazı tipinde oluşturulur.
  • Değiştirme süresi: Değiştirme dönemi, engelleme döneminden sonra gelir. Web yazı tipi değiştirme süresinde kullanılabilir hale gelirse "değiştirilir".

font-display stratejileri, performans ile estetik arasındaki dengeyle ilgili farklı bakış açılarını yansıtır. Bu nedenle, bireysel tercihlere, web yazı tipinin sayfa ve marka için ne kadar önemli olduğuna ve geç gelen bir yazı tipinin başka bir yere taşındığında ne kadar rahatsız edici olabileceğine bağlı olduğundan önerilen bir yaklaşım sunmak zordur.

Çoğu site için en geçerli olacak üç strateji şunlardır:

  • Performans en önemli öncelikse: font-display: optional kullanın. En "yüksek performanslı" yaklaşım budur: Metin oluşturma 100 ms'den uzun sürmez ve yazı tipi değiştirmeyle ilgili düzen kaymalarının olmayacağı garanti edilir. Ancak olumsuz tarafı, web yazı tipinin geç teslim edilmesi durumunda kullanılamamasıdır.

  • Metni hızlı bir şekilde görüntülemek en önemli öncelik olsa da web yazı tipinin kullanıldığından emin olmak istiyorsanız: font-display: swap kullanın ancak düzende değişikliğe neden olmaması için yazı tipini yeterince erken yayınlamaya özen gösterin. Bu seçeneğin olumsuz tarafı, yazı tipi geç geldiğinde yaşanan göze hitap eden kaymadır.

  • Metnin web yazı tipinde görüntülenmesini sağlamak en önemli önceliğinizse: font-display: block kullanın ancak yazı tipini metnin gecikmesini en aza indirecek kadar erken teslim ettiğinizden emin olun. Bunun olumsuz tarafı, ilk metin görüntülemesinde gecikme yaşanmasıdır. Bu açıklamaya rağmen, metin aslında görünmez olarak çizildiğinden ve bu nedenle, alanı ayırmak için yedek yazı tipi alanı kullanıldığından düzen kaymasına da neden olabilir. Web yazı tipi yüklendikten sonra, boşluk bırakma ve dolayısıyla kayma gerekebilir. Bununla birlikte, metnin kendisinin kaydığı görülmeyeceği için bu, font-display: swap ile karşılaştırıldığında daha az rahatsız edici bir değişim olabilir.

Şu iki yaklaşımın da birleştirilebileceğini unutmayın: Örneğin, marka ve görsel olarak ayırt edici diğer sayfa öğeleri için font-display: swap, gövde metninde kullanılan yazı tipleri için ise font-display: optional kullanın.

Yedek yazı tipiniz ile web yazı tipiniz arasındaki kaymayı azaltın

CLS etkisini azaltmak için yeni size-adjust özelliklerini kullanabilirsiniz. Daha fazla bilgi için CSS size-adjust ile ilgili makaleye bakın. Bu, araç setimize yeni bir ekleme olduğu için şu anda daha gelişmiş ve biraz manuel. Ancak kesinlikle denemeler yapmanızı ve ileride araç geliştirmelerini gözlemlemenizi öneririz.

Sonuç

Web yazı tipleri hâlâ performans sorunu olsa da, bu sorunu mümkün olduğunca azaltmak amacıyla bunları optimize etmemize olanak tanıyan seçeneklerimiz giderek artıyor.