Blog sitelerinde kullanılan yazı tipi kodları, blog sayfalarının yüklenmesini geciktiren en önemli unsurlardan biri.
Bu yazımızda Github gibi sitelerin kullanmış olduğu CSS @font-face sistem yazı tipi kodunu blog sitesine nasıl ekleneceğini ve özellikleri hakkında bilgiler paylaşacağım.
Google font bağlantılarının yüklenmesini erteleme ve CSS @font-face oluşturulmasını engelleyen problemleri ortadan kaldırmak için birçok çözüm yolu denendi. Ama yine de sayfa yüklenme hızını etkileyen sorunlar giderilemedi. Tüm tarayıcılar ve mobil cihazlar da dahil tüm cihazların yazı tipine uyum sağlayabilen, harici CSS kodu bağlantısı kullanmadan muhteşem bir yazı tipi sahip olmak imkansız gibi bir durumdu.
Blog sayfalarının daha hızlı yüklenmesi için Arial, Georgia, Helvetica, Times New Roman ve diğer web güvenli yazı tipi sistemlerini kullanılabilir. Fakat bu yazı tipleri de bir çok blogcu tarafından beğenilmiyor veya zevkine uymuyor.
Bir sitede maksimum 50000byte CSS kod boyutu kullanılması önerilmekte. CSS kullanma sınırlamalarından başlayarak, CSS @font-face boyutunu küçülterek sitenin CSS boyutunu azaltmak için birçok çözüm yolu aramaya çalışıyoruz.
CSS @font-face, bir tür yazı tipi ve bir yazı tipi kalınlığını kullandığımızda oldukça fazla boyutta olabiliyor. Bu yazımızda paylaştığımız yazı tipi sistemi hem CSS boyutunu azaltmak hemde @font-face yazı tipi bağlantılarının veya Google yazı tipi bağlantılarının kullanılmasından engelleme oluşturmayı kaldırmanın bir yoludur.
Yukarıda da söylediğim gibi yazı tipi sistemini Github ve Bootstrap gibi diğer büyük web siteleri kullanmakta. Ancak, blog geliştiricilerinin ve blog yazarlarının çok aşina olduğu bir konu değil.
Yazı tipi sistemi font-family kodunu aşağıdaki gibi blog sitenize eklediğinizde H ve B etiketleri gibi diğer etiketler için, yazı boyutu ve kalınlığını ayarlamak için font-size ve font-weight ögeleri ekleyerek ayarlayabilirsiniz.
Blogger Sitelerine Sistem Yazı Tipi Nasıl Eklenir?
Blogger hesabınızda oturum açın ve eklemek istediğiniz blogunuz kumanda panelinde bulunan Tema > HTML'i Düzenle yolunu takip ederek blogunuzun şablon editör sayfasını açın.
Sistem yazı tipi kodunu blogunuza eklemeden önce lütfen blog şablonunuzu yedekleyin.Şablon CSS kodlarınız arasında bulunan aşağıdaki benzer CSS kodu bulun. Kod içerisinde ve diğer tüm CSS ögesi kodlarınız içerisinde bulunan font-family kodu kaldırın/silin.
font-family (Örnek)
body{background:#fff;font-family:'Roboto',sans-serif;margin:0;padding:0;color:#000;font-size:14px;font-weight:400;text-align:left;line-height:normal}Aşağıdaki sistem yazı tipi kodunu, blogunuzun şablon CSS kodları arasında bulmuş olduğunuz yukarıdaki örnek koda benzer kodun bir satır üzerine ekleyin.
Blogger Sistem Yazı Tipi Kodu
body{font-family: -apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif;}Sistem yazı tipi uygulamasının çalışması için, blog şablon kodlarınız arasında bulunan @font-face bağlantılarının tümünü kaldırın.
font-size: Yazı boyutunu ayarlamak için kullanılan CSS kodu.
font-size
.post h2{font-size: 16px}font-weight: Yazı tipi kalınlığını ayarlamak için kullanılan CSS kodu.
font-weight
.post h2{font-weight: bold}.post em{font-weight: 300}.post-body{font-weight: 400}.post b{font-weight: 500}.post h2{font-weight: 600}.post h1{font-weight: 700}GitHub sitesi şuan aşağıdaki sistem yazı tipi kodunu kullanmakta. Aşağıdaki kod hem örnek hem de kaynak göstermek amaçlı ekledim.
GitHub Sistem Yazı Tipi
body {font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";}Sistem yazı tipi, tarayıcı, kullanıcının kullandığı cihazın sistemi tarafından kullanılan yazı tipini otomatik olarak algılayacaktır.
Sistem yazı tipi açıklamaları:
- -apple-system (San Francisco): iOS Safari, macOS Safari, macOS Firefox
- BlinkMacSystemFont (San Francisco): macOS Chrome
- Segoe UI: Windows
- Roboto: Android, Chrome OS
- Ubuntu: Ubuntu
- Oxygen / Oxygen-Sans: KDE
- Helvetica Neue: macOS versions < 10.11
- Cantarell: GNOME
Aşağıdaki ön izleme butonuna tıklayarak sistem yazı tipi ile oluşturulmuş sayfanın yazı tiplerini kontrol edebilirsiniz.
Bu yazımızda Sistem Yazı Tipi özelliğini blog sitelerine ekleme ve özellikleri hakkında bilgiler paylaştım. Yazımız içerisinde bulunan bilgiler hakkında sorularınız ve yardım için yorum formunu kullanarak bana ulaşabilirsiniz.