WordPress'te bir sistem yazı tipi yığınına geçme (nasıl ve neden)

Web performansının büyük bir hayranıyım. Ama aynı zamanda tasarımdan ödün vermesi gerektiğini de düşünmüyorum. Ortada her zaman iyi bir denge vardır. 2017'de GitHub'ın blogundaydım ve yazı tiplerini kazıyordum. Okuması süper kolaydı. Bu yüzden Chrome Devtools ile özellikleri araştırdım ve bir sistem yazı tipi yığını kullandıklarını gördüm.

Yıllardır sistem yazı tiplerini kullanıyorum ve onları seviyorum. Bugün size WordPress sitenizde bir sistem yazı tipi yığınını nasıl kullanacağınızı göstermek istiyorum.

Sistem yazı tipi yığını nedir?

Bir web sitesi için seçilebilecek farklı yazı tipleri vardır. Hemen hemen dört farklı seçeneğiniz var:

• Web uyumlu yazı tipleri: Tarayıcı tarafından ücretsiz ve indirme süresi gerekmez, ancak genellikle eski görünür ve bu nedenle çok fazla kullanılmaz. Arial veya Tahoma'yı kimse sevmez, değil mi? Web uyumlu yazı tiplerinin tam listesine bakın.
• Web yazı tipleri: Güzel görünüyor, ancak tarayıcı tarafından indirilmesi gerekiyor. Hem ücretsiz hem de premium seçeneklere sahip olun. Web sitenizin genel sayfa ağırlığına katkıda bulunur. Ancak, önbelleğe alınmış CDN'den sunulabilirler. Sağlayıcılar arasında Google, Adobe Fonts (TypeKit) vb. bulunur.
• Web yazı tiplerini yerel olarak barındırın: Hem ücretsiz hem de premium seçenekler mevcuttur. Hala indirme süresi gerektirir ve önbelleğe alınmış CDN'de tek bir HTTP/2 bağlantısından yararlanabilir. Tüm büyük tarayıcıların artık ayrı önbellek bölümlemesi vardır, bu nedenle bunları yerel olarak barındırmak performans açısından aslında daha iyidir. Google yazı tiplerinizi Perfmatters ile yerel olarak barındırabilirsiniz.
• Sistem yazı tipleri: Ücretsiz, işletim sistemiyle eşleştikleri için oldukça iyi görünüyorlar ve indirme süresi gerekmiyor! Weather.com, GitHub, Bootstrap, Medium, Ghost, Booking.com (sistem yazı tipi hikayelerini okuyun), PubMed ve hatta WordPress panonuz tarafından kullanılırlar. Kişisel görüşüme göre sistem yazı tipleri, Windows'a kıyasla macOS'ta biraz daha iyi görünüyor.

Sistem yazı tipleri yeni bir şey değil. Aslında Medium, 2015'te bunları kullanıyordu. Yerel yazı tiplerini kullandıkları için tıpkı işletim sisteminiz gibi hissediyorlar . Birçok modern işletim sistemi yazı tiplerini çok akıllıca seçer ve hepsinin çok şık bir görünümü ve hissi vardır. Arial veya Times New Roman'ın web için güvenli bir yazı tipine geri dönmek gibi değil. Güven bana; kimse bir web sitesinde Times New Roman görmek istemez.

Ve hepsinden önemlisi, sistem yazı tipleri, tarayıcı tarafından herhangi bir indirme süresi gerektirmediklerinden , web için güvenli yazı tipleri gibi çalışır. Bu, web sitenizdeki genel sayfa ağırlığını azaltmaya yardımcı olabilir. Nisan 2022 itibariyle, web yazı tipleri ortalama olarak toplam bir web sitesinin ağırlığının yaklaşık %6,07'sini oluşturuyor. Bu çok büyük olmasa da, yaptığınız her küçük optimizasyonun özellikle mobil cihazlarda hızlı bir web sitesine katkıda bulunduğunu unutmayın.

Sistem yazı tiplerini kullanmanın herhangi bir dezavantajı var mı? Numara! Güzelliği bu. PageSpeed ​​Insights'taki "Yazı tipi yükleme sırasında metnin görünür kalmasını sağlayın" gibi uyarılar hiçbir zaman devreye girmez, çünkü teknik olarak indirilen hiçbir şey yoktur.

Sistem yazı tipi yığını CSS

Web yazı tiplerine sahip yazı tipi ailesi özelliğiyle, genellikle birincil yazı tipinize ve bir veya iki yedek yazı tipine sahip olursunuz. Sistem yazı tipleriyle, tüm farklı işletim sistemlerini dahil etmeniz ve bu nedenle birkaç yazı tipini daha yığmanız gerekir. Bu nedenle "sistem yazı tipi yığını" olarak adlandırılır.

Örneğin, CSS'nin bir web yazı tipiyle nasıl görünebileceği aşağıda açıklanmıştır.

 yazı tipi ailesi: "Open Sans","Helvetica Neue",sans-serif;

Ve işte bir sistem yazı tipi yığını nasıl görünebilir. İyi haber şu ki, hepsi yüklenmiyor; bu, eğer varsa, işletim sisteminden hangi yazı tiplerinin yüklenmesi gerektiğine ilişkin bir sıralamadır.

 font ailesi: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"

WordPress panonuzun bir sistem yazı tipi yığını kullandığını biliyor muydunuz? İşte kullandıkları şey.

 font ailesi: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif

CSS-Tricks ayrıca @font-face kullanarak sistem yazı tiplerinin nasıl uygulanacağı konusunda alternatif bir yönteme sahiptir.

Sistem yazı tipi yığını hile sayfası

Bu, hangi kurulumu istediğinizi seçmeniz gereken yerdir. Her bir işletim sistemiyle hangi yazı tiplerinin birlikte gittiğinin bir listesi. Not: Bu zamanla değişir, bu nedenle yeni işletim sistemleri ortaya çıktıkça yazı tiplerinizi yeniden gözden geçirmeniz gerekebilir. Bu listeyi güncel tutacağımdan emin olacağım.

Bir sistem yazı tipi yığını nasıl uygulanır

Burada woorkup.com'da ve diğer tüm web sitelerimde bir sistem yazı tipi yığını kullanıyorum. Sonunda her iki dünyanın da en iyisini bulmuş gibi hissediyorum. İşte bunu nasıl yaptım.

Seçenek 1: GeneratePress WordPress temasını kullanın

Bunu süper kolay hale getirmek ister misiniz? Tüm web sitelerimde kullandığım GeneratePress temasına geçmeniz yeterli. Özelleştiricide Tipografi altında “Sistem Yığını”nı seçmeniz yeterlidir. Ve bu kadar!

Astra gibi diğer performans odaklı temalar da sistem yazı tiplerini kullanma seçeneğine sahiptir.

Seçenek 2: CSS ile sistem yazı tipi yığını ekleyin

Başka bir WordPress teması kullanıyorsanız, biraz CSS ile bir sistem yazı tipi yığınına kolayca geçebilirsiniz.

Aşama 1

WordPress'te, font-family CSS'yi değiştirmeniz gerekir. Kodu eklemek için “Ek CSS” altında WordPress özelleştiriciyi kullanabilirsiniz.

Adım 2

Aşağıdaki kodu girin. Bu, temaya göre değişebilir, ancak çoğu için aşağıdakiler her şeyi geçersiz kılmalıdır. Chrome'un daha yeni sürümleri bunu desteklediği için system-ui eklemem dışında, GithHub ile aynı sistem yazı tipi yığınını kullanıyorum. Yığında göründükleri sırayla kullanılacaklarını unutmayın.

 body {font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}
h1,h2,h3,h4,h5,h6 {font-family:-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji" ", "Segoe UI Sembolü";}

Temanıza bağlı olarak, gövde içeriği için paragraf etiketleri eklemeniz gerekebilir. Yani bu olurdu:

 body, p {font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }

Aşama 3

Ayrıca, WordPress temanızdan yüklediğiniz Google Yazı Tipleri gibi herhangi bir üçüncü taraf yazı tipini devre dışı bırakmak isteyeceksiniz. Her geliştirici farklı yazı tiplerini içerdiğinden, bu yine değişebilir. Ancak birçok temanın artık Google Yazı Tiplerini açıp kapatmanın kolay bir yolu var.

Varsayılan WordPress temalarından birini kullanıyorsanız, ücretsiz Google Yazı Tiplerini Devre Dışı Bırak eklentisini kolayca kullanabilirsiniz. Veya Google yazı tiplerini Perfmatters eklentimizde de devre dışı bırakabilirsiniz.

Hız testleri öncesi ve sonrası

Ve tabii ki dayanamadım. İşte hız testlerinin öncesi ve sonrası. Her test beş kez çalıştırıldı ve bir ortalaması alındı.

Önce hız testi

İşte daha önce, Google yazı tiplerini yüklediğimde hız testi.

sonra hız testi

İşte sistem yazı tipi yığınımı kullandıktan sonraki hız testi. Gördüğünüz gibi, tüm sayfa ağırlığımı yaklaşık 60 KB düşürdüm ve üç istekten kurtuldum. Birini fonts.googleapis.com'a ve ardından Roboto'nun farklı yazı tipi ağırlıklı sürümleri için iki indirme. Sistem yazı tipi yığını, Google yazı tiplerini kullanmaktan yaklaşık %6 daha hızlıydı .

4-5 farklı yazı tipi ağırlığı veya stili ve hatta bazen 2-3 farklı Google yazı tipi kullanan birçok site biliyorum. Böylece potansiyel olarak benden bile daha önemli gelişmeler görebilirsiniz.

Ayrıca novashare.io WordPress sitemizi sistem yazı tiplerine taşıdım ve harika sonuçlar elde ettim; Aşağıdaki bu hız testini kontrol edin.

Yazı tipi yumuşatma

Yazı tipi yumuşatma kişisel tercihinize bağlıdır. Kenar yumuşatma uyguladığınızda yazı tipiniz biraz daha ince ve hafif olacaktır. Biraz daha kalın yazı tipini tercih ettiğim için bu sitede kullanmıyorum; Sanırım biraz daha sıcak hissettiriyor. Ancak hangisini beğendiğinizi görmek için her ikisini de deneyebilirsiniz.

Bunu gövdeye ekleyebilirsiniz.

 gövde {
-webkit-font-smoothing: kenar yumuşatma;
-moz-osx-font-düzeltme: gri tonlamalı;
}

Özet

Sistem yazı tipleri, web yazı tiplerine ve web için güvenli yazı tiplerine harika bir alternatif olabilir. Yazı tipimin görünüşünü hâlâ çok seviyorum ve artık bunun kullanıcılar için herhangi bir yük oluşturmadığını biliyorum. Google yazı tipleri yerel olarak barındırılabilse de, yine de genel sayfa ağırlığının bir parçasıdır.

Düşüncelerinizi merak mı ediyorsunuz? WordPress ile henüz bir sistem yazı tipi yığını kullandınız mı? Eğer öyleyse, aşağıda bana bildirin.