Yazı tipleriyle ilgili en iyi uygulamalar

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

Katie Hempenius
Katie Hempenius
X
Barry Pollard

Bu belgede, yazı tipleriyle ilgili performans en iyi uygulamaları ele alınmaktadır. Web yazı tiplerinin performansı etkilemesinin çeşitli yolları vardır:

Bu doküman üç bölümden oluşur: 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 ilgili yönünün nasıl çalıştığı açıklanmakta ve buna karşılık gelen en iyi uygulamalar sunulmaktadır.

Yazı tipi yükleme

Yazı tipleri önemli kaynaklardır. Bu tanımlama bilgileri olmadan kullanıcı, sayfa içeriğini görüntüleyemeyebilir. Bu nedenle, yazı tipi yüklemeyle ilgili en iyi uygulamalar genellikle yazı tiplerinin mümkün olduğunca erken yüklenmesini sağlamaya odaklanır. Bu yazı tipi dosyalarını indirmek için ayrı bağlantı kurulumları gerektiğinden, üçüncü taraf sitelerden yüklenen yazı tiplerine özellikle dikkat edilmelidir.

Sayfanızın 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 sekmesi.

Anlama @font-face

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

@font-face bildirimi, herhangi bir web yazı tipiyle çalışmanın önemli bir parçasıdır. En azından, yazı tipine atıfta bulunmak için kullanılan adı bildirir 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 yanılgı, bir @font-face bildirimiyle karşılaşıldığında yazı tipi istendiği yönündedir. Bu ifade yanlıştır. Tek başına @font-face beyanı, yazı tipi indirme işlemini tetiklemez. Bunun yerine, yazı tipi yalnızca sayfada kullanılan stil tarafından referans verilirse indirilir. Örneğin:

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

h1 {
  font-family: "Open Sans"
}

Bu örnekte, Open Sans yalnızca sayfada bir <h1> öğesi varsa indirilir.

Bu nedenle, yazı tipi optimizasyonu hakkında düşünürken yazı tipi dosyaları kadar stil sayfalarına da önem vermek gerekir. Stil sayfalarının içeriğini veya teslimatını değiştirmek, yazı tiplerinin ne zaman geleceğini önemli ölçüde etkileyebilir. Benzer şekilde, kullanılmayan CSS'yi kaldırmak ve stil sayfalarını bölmek, bir sayfa tarafından yüklenen yazı tipi sayısını azaltabilir.

Satır içi yazı tipi bildirimleri

Çoğu site, yazı tipi bildirimlerini ve diğer kritik stil öğelerini 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 ölçüde fayda sağlar. Tarayıcının harici stil sayfasının indirilmesini beklemesi gerekmediğinden, bu sayede tarayıcı yazı tipi bildirimlerini daha erken keşfedebilir.

<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'yi satır içinde yayınlamak, tüm sitelerin uygulayamayacağı daha gelişmiş bir teknik olabilir. Performans avantajları açıktır ancak gerekli CSS'nin ve ideal olarak yalnızca kritik CSS'nin doğru şekilde satır içi olarak eklenmesini ve ek CSS'nin oluşturmayı engelleyici olmayan bir şekilde sunulmasını sağlamak için ek işlemler ve derleme araçları gerekir.

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

Siteniz üçüncü taraf bir siteden yazı tipleri yüklüyorsa üçüncü taraf kaynakla erken bağlantılar kurmak için preconnect kaynak ipucunu kullanmanız önemle tavsiye edilir. Kaynak ipuçları, belgenin <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ıya önceden bağlanmak üzere crossorigin özelliğini kullanan ayrı bir preconnect kaynak ipucu ekleyin. Stil sayfalarının aksine, yazı tipi dosyaları CORS bağlantısı üzerinden gönderilmelidir.

<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ının, ayrı kaynaklardan stil sayfaları ve yazı tipleri sunabileceğini unutmayın. Örneğin, Google Fonts için preconnect kaynak ipucu şu ş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, sayfa yükleme sürecinin başlarında yazı tiplerinin bulunabilirliğini sağlamada oldukça etkili olsa da bu durum, tarayıcı kaynaklarının diğer kaynakların yüklenmesinden alınması pahasına gerçekleşir.

Yazı tipi bildirimlerini satır içi olarak eklemek ve stil sayfalarını ayarlamak daha etkili bir yaklaşım olabilir. Bu düzenlemeler, yalnızca geçici bir çözüm sunmak yerine geç keşfedilen yazı tiplerinin temel nedenini ele almaya daha yakındır.

Ayrıca, preload yazı tipi yükleme stratejisi olarak kullanıldığında tarayıcının yerleşik içerik anlaşması stratejilerinden bazılarını atladığı için dikkatli olunmalıdır. Örneğin, preload, unicode-range bildirimlerini yok sayar ve dikkatli kullanıldığında yalnızca tek bir yazı tipi biçimini yüklemek için kullanılmalıdır.

Ancak harici stil sayfaları kullanırken en önemli yazı tiplerini önceden yüklemek çok etkili olabilir. Aksi takdirde tarayıcı, yazı tipinin gerekli olup olmadığını çok daha sonra keşfeder.

Yazı tipi teslimi

Yazı tiplerinin daha hızlı sunulması, metinlerin daha hızlı oluşturulmasını sağlar. Ayrıca, bir yazı tipi yeterince erken teslim edilirse yazı tipi değiştirme işleminden kaynaklanan düzen kaymalarının ortadan kaldırılmasına yardımcı olabilir.

Kendinden barındırılan yazı tiplerini kullanma

Kâğıt üzerinde, üçüncü taraf bağlantı kurulumunu ortadan kaldırdığı için kendi kendine barındırılan bir yazı tipi kullanmak daha iyi performans sunmalıdır. Uygulamada, bu iki seçenek arasındaki performans farkları daha az belirgindir. Örneğin, Web Almanac, üçüncü taraf yazı tiplerini kullanan sitelerin, birinci taraf yazı tiplerini kullanan yazı tiplerine göre daha hızlı oluşturulduğunu tespit etti.

Kendi kendine barındırılan yazı tiplerini kullanmayı düşünüyorsanız sitenizin İçerik Yayınlama Ağı (CDN) ve HTTP/2 kullandığını doğrulayın. Bu teknolojiler kullanılmadığında, kendi kendine barındırılan yazı tiplerinin daha iyi performans sunma olasılığı çok daha düşüktür.

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

WOFF2 kullanma

Modern yazı tipi biçimleri arasında en yeni olan WOFF2, en geniş tarayıcı desteğine sahiptir ve en iyi sıkıştırmayı sunar. WOFF2, Brotli kullandığı için WOFF'tan% 30 daha iyi sıkıştırır. Bu da daha az veri indirilmesi ve dolayısıyla daha hızlı performans anlamına gelir.

Tarayıcı desteği göz önüne alındığında, uzmanlar artık yalnızca WOFF2 kullanılmasını öneriyor:

Hatta artık şunu ilan etmenin zamanı geldiğini düşünüyoruz: Yalnızca WOFF2 kullanın ve diğer her şeyi unutun.

Bu, CSS'nizi ve iş akışınızı büyük ölçüde basitleştirir ve yanlışlıkla iki kez veya hatalı yazı tipi indirilmesini önler. WOFF2 artık her yerde destekleniyor. Bu nedenle, gerçekten eski tarayıcıları desteklemeniz gerekmiyorsa yalnızca WOFF2'yi kullanın. Bu mümkün değilse eski tarayıcılara hiç web yazı tipi sunmamayı düşünebilirsiniz. Sağlam bir yedek stratejiniz varsa bu bir sorun teşkil etmez. Eski tarayıcıları kullanan ziyaretçiler, yedek yazı tiplerinizi görür.

Bram Stein, 2022 Web Almanac

Alt küme yazı tipleri

Yazı tipi dosyaları genellikle destekledikleri çeşitli karakterler için çok sayıda glif içerir. Ancak sayfanızda tüm karakterlere ihtiyacınız olmayabilir ve yazı tiplerini alt kümeler halinde kullanarak yazı tipi dosyalarının boyutunu küçültebilirsiniz.

@font-face bildirimindeki unicode-range tanımlayı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;
}

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

unicode-range genellikle alt küme oluşturma tekniğiyle birlikte kullanılır. 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 karakterleri tüm kullanıcılara 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 ölçüde değişir:

  • 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ı tipi dosyasının boyutunu önemli ölçüde azaltabilir.

Bazı yazı tipi sağlayıcılar, yazı tipi dosyalarının farklı alt kümeler içeren farklı sürümlerini otomatik olarak sağlayabilir. Örneğin, Google Fonts varsayılan olarak şunları 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ş yaparken bu optimizasyon gözden kaçabilir ve yerel olarak daha büyük yazı tipi dosyalarına yol açabilir.

Yazı tipi sağlayıcınız izin veriyorsa yazı tiplerini manuel olarak alt kümeye ayırabilirsiniz. Bunu bir API ile (Google Fonts, text parametresi sağlayarak bunu destekler) veya yazı tipi dosyalarını manuel olarak düzenleyip kendiniz barındırarak yapabilirsiniz. Yazı tipi alt kümeleri oluşturmaya yönelik araçlar arasında subfont ve glyphanger yer alır.

Yazı tipi lisanslarının, alt küme oluşturmaya ve kendi kendine barındırmaya izin verdiğini her zaman kontrol edin.

Daha az web yazı tipi kullanın

En hızlı sunulan yazı tipi, ilk etapta istenmeyen yazı tipidir. Sistem yazı tipleri ve değişken yazı tipleri, sitenizde kullanılan web yazı tiplerinin sayısını azaltmanın iki olası yoludur.

Sistem yazı tipi, kullanıcının 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şir. Yazı tipi zaten yüklü olduğundan indirilmesi gerekmez. Sistem yazı tipleri, gövde metinlerinde özellikle iyi sonuç verebilir.

CSS'nizde sistem yazı tipini kullanmak için yazı tipi ailesi olarak system-ui değerini girin:

font-family: system-ui

Değişken yazı tiplerinin temelinde, tek bir değişken yazı tipinin birden fazla yazı tipi dosyasının yerine kullanılabileceği fikri yatar. Değişken yazı tipleri, "varsayılan" yazı tipi stilini tanımlayarak ve yazı tipini değiştirmek için "eksenler" sağlayarak çalışır. Örneğin, Weight eksenli bir değişken yazı tipi, daha önce açık, normal, kalın ve ekstra kalın için ayrı yazı tipleri gerektiren harfleri uygulamak için kullanılabilir.

Değişken yazı tiplerine geçiş herkes için avantajlı değildir. Değişken yazı tipleri birçok stil içerdiğinden genellikle yalnızca bir stil içeren bağımsız değişken olmayan yazı tiplerinden daha büyük dosya boyutlarına sahiptir. Değişken yazı tiplerini kullanmaktan en büyük faydayı sağlayacak siteler, çeşitli yazı tipi stilleri ve ağırlıkları kullanan (ve kullanması gereken) sitelerdir.

Yazı tipi oluşturma

Henüz yüklenmemiş bir web yazı tipiyle karşılaştığında tarayıcı bir ikilemle karşı karşıya kalır: Web yazı tipi gelene kadar metni oluşturmayı beklemeli mi? Yoksa web yazı tipi gelene kadar metni yedek yazı tipiyle mi oluşturmalı?

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 engelliyor.

Bu davranış, font-display özelliği kullanılarak yapılandırılabilir. Bu seçim önemli sonuçlar doğurabilir: font-display, LCP, FCP ve düzen kararlılığını etkileyebilir.

Uygun bir font-display stratejisi seçin

font-display ilişkili web yazı tipi yüklenmediğinde tarayıcıya metin oluşturma işlemine nasıl devam etmesi gerektiğini bildirir. Yazı tipi yüzüne 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 dönemi Değişim 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 0ms Sonsuz
Fallback 100 ms 3 saniye
İsteğe bağlı 100 ms Yok
  • Engelleme dönemi: Engelleme dönemi, 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ı tipiyle oluşturulur ve bu nedenle metin kullanıcı tarafından görünmez. Yazı tipi, engelleme süresinin sonunda kullanılamıyorsa yedek yazı tipiyle oluşturulur.
  • Takas dönemi: Takas dönemi, engelleme döneminden sonra gelir. Web yazı tipi, değiştirme süresi içinde kullanıma sunulursa "değiştirilir".

font-display stratejileri, performans ve estetik arasındaki dengeyle ilgili farklı bakış açılarını yansıtır. Bu nedenle, kişisel tercihlere, web yazı tipinin sayfa ve marka için ne kadar önemli olduğuna ve geç gelen bir yazı tipinin değiştirildiğinde ne kadar rahatsız edici olabileceğine bağlı olduğundan bir yaklaşım önermek zordur.

Çoğu site için, en önemli önceliğinize göre en uygun üç strateji şunlardır:

  • Performans: font-display: optional kullanın. Bu, en "performanslı" yaklaşımdır: Metin oluşturma işlemi en fazla 100 ms geciktirilir ve yazı tipi değiştirme ile ilgili düzen kaymalarının olmadığı garanti edilir. Ancak web yazı tipi geç gelirse kullanılmaz.

  • Metni hızlıca görüntüleyin ve web yazı tipini kullanmaya devam edin: font-display: swap kullanın ancak yazı tipini, düzen kaymasına neden olmayacak kadar erken teslim ettiğinizden emin olun. Bu seçeneğin dezavantajı, yazı tipi geç geldiğinde oluşan rahatsız edici kaymadır.

  • Metin, web yazı tipiyle gösteriliyor: font-display: block kullanın ancak yazı tipini, metnin gecikmesini en aza indirecek kadar erken teslim ettiğinizden emin olun. İlk metin gösterimi gecikir. Bu gecikmeye rağmen, metin aslında görünmez olarak çizildiğinden ve bu nedenle yer ayırmak için yedek yazı tipi alanı kullanıldığından düzen kaymasına neden olabilir. Web yazı tipi yüklendiğinde farklı bir alan gerekebilir ve bu nedenle kayma oluşabilir. Metnin kendisi kaymış gibi görünmeyeceğinden bu, font-display: swap ile karşılaştırıldığında daha az rahatsız edici bir değişiklik olabilir.

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

Simge yazı tipleri

font-displayGeleneksel web yazı tipleri için iyi sonuç veren stratejiler simge yazı tipleri için aynı derecede iyi sonuç vermez. Simge yazı tipinin yedek yazı tipi genellikle simge yazı tipinden önemli ölçüde farklı görünür ve karakterleri tamamen farklı bir anlam ifade edebilir. Sonuç olarak, simge yazı tiplerinin önemli düzen kaymalarına neden olma olasılığı daha yüksektir.

Ayrıca, yedek yazı tipi kullanmak pratik olmayabilir. Mümkün olduğunda, simge yazı tiplerini SVG'lerle değiştirin. Bu, erişilebilirlik açısından da daha iyidir. Popüler simge yazı tiplerinin yeni sürümleri genellikle SVG'yi destekler. SVG'lere geçiş hakkında daha fazla bilgi için Font Awesome'ın SVG Sprites sayfasını ve Material Icons Kılavuzumuzu inceleyin.

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

CLS etkisini azaltmak için size-adjust özelliklerini kullanabilirsiniz.

Sonuç

Web yazı tipleri hâlâ performans açısından sorun teşkil etse de bu sorunu mümkün olduğunca azaltmak için optimize etmemize olanak tanıyan, sürekli büyüyen bir seçenek yelpazesine sahibiz.