Web yazı tiplerini verimli bir şekilde yayınlamak için Google Fonts CSS API'yi kullanma.
Yıllar içinde web yazı tipleri teknolojisinde çok şey değişti. Eskiden metin resmi veya Flash eklentisi gerektiren (ve web sitenizin arama motoru optimizasyonunu tehlikeye atan) niş bir uygulama olan bu uygulama, artık web'de standart bir uygulamadır. Bir zamanlar, sayfa yüklenmeden önce yazı tipinin tamamını (kullanmadığınız stiller ve karakterlerle birlikte) yüklemeniz gerekiyordu. Ancak bu da artık geçmişte kaldı.
Google Fonts CSS API de web yazı tipi teknolojisindeki değişikliklere ayak uydurmak için yıllar içinde gelişti. API, tarayıcınızın API'yi kullanan tüm web sitelerinde yaygın olarak kullanılan yazı tiplerini önbelleğe almasına izin vererek web'i hızlandırmak amacıyla ortaya çıkmış olsa da bu ilk değer teklifinden çok daha ileriye gitti. Bu durum artık geçerli değil ancak API, web sitelerinin hızlı yüklenmesini ve yazı tiplerinin düzgün çalışmasını sağlamak için ek ve önemli optimizasyonlar sunmaya devam ediyor.
Google Fonts CSS API'yi kullanarak web siteniz, CSS yükleme süresini en aza indirmek için yalnızca ihtiyaç duyduğu yazı tipi verilerini isteyebilir. Böylece web sitenizin ziyaretçileri içeriğinizi en hızlı şekilde yükleyebilir. API, her isteğe söz konusu web tarayıcısı için en iyi yazı tipiyle yanıt verir.
Tüm bunlar, kodunuza tek bir HTML satırı ekleyerek yapılır.
Google Fonts CSS API'yi kullanma
Google Fonts CSS API dokümanlarında her şey güzel bir şekilde özetlenmektedir:
Herhangi bir programlama yapmanız gerekmez. Tek yapmanız gereken, HTML dokümanınıza özel bir stil sayfası bağlantısı eklemek ve ardından yazı tipini CSS stilinde belirtmektir.
Yapmanız gereken en az işlem, HTML'nize aşağıdaki gibi tek bir satır eklemektir:
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
API'den yazı tipi istediğinizde hangi aileyi veya aileleri istediğinizi ve isteğe bağlı olarak kalınlıklarını, stillerini, alt kümelerini ve diğer birçok seçeneği belirtirsiniz. Ardından API, isteğinizi iki şekilde işler:
- İsteğiniz, API'nin zaten dosyaları olan ortak parametreleri kullanıyorsa kullanıcınıza hemen CSS döndürerek kullanıcıyı bu dosyalara yönlendirir.
- API'nin şu anda önbelleğe almadığı parametrelerle bir yazı tipi istediyseniz API, bunu hızlı bir şekilde yapmak için HarfBuzz'ı kullanarak yazı tiplerinizi anında alt kümelerine ayırır ve bunları işaret eden CSS'yi döndürür.
Yazı tipi dosyaları büyük olabilir ancak büyük olmaları gerekmez.
Web yazı tipleri büyük olabilir. WOFF2'de Noto Sans Japanese yazı tipinin tek bir ağırlığı yaklaşık 3,4 MB'tır. Bu yazı tipini kullanıcılarınızın her birine indirmek sayfa yükleme sürenizi olumsuz etkiler. Her milisaniyenin ve her baytın değerli olduğu durumlarda, yalnızca kullanıcılarınızın ihtiyaç duyduğu verileri yüklediğinizden emin olmak istersiniz.
Google Fonts CSS API, kullanıcılarınıza yalnızca web sitenizin gerektirdiği metin ve stilleri sunmak için gerçek zamanlı olarak oluşturulan çok küçük yazı tipi dosyaları (alt küme olarak adlandırılır) oluşturabilir. Yazı tipinin tamamını yayınlamak yerine text parametresini kullanarak belirli karakterleri isteyebilirsiniz.
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap&text=RobtMn" rel="stylesheet" />
CSS API, API parametreleri olmadan kullanıcılarınıza otomatik olarak ek web yazı tipi optimizasyonları da sağlar. API, kullanıcılarınıza unicode-range özelliği etkinleştirilmiş CSS dosyaları sunar (web tarayıcıları tarafından destekleniyorsa). Böylece kullanıcılar, yalnızca web sitenizin ihtiyaç duyduğu karakterler için yazı tiplerini yükler.
Unicode-range CSS tanımlayıcısı, artık büyük yazı tipi indirmeleriyle mücadele etmek için kullanılabilecek bir araçtır. Bu CSS mülkü, @font-face beyanının içerdiği bir dizi Unicode karakteri belirler. Sayfada bu karakterlerden biri oluşturulursa ilgili yazı tipi indirilir. Bu yöntem her tür dil için işe yarar. Bu nedenle, Latin, Yunanca veya Kiril alfabesi içeren bir yazı tipini alıp daha küçük alt kümeler oluşturabilirsiniz. Önceki grafikte, bu karakter kümelerinin üçünü de yüklemeniz gerekirse 600'den fazla karakter olduğunu görebilirsiniz.
Bu, web için Çince, Japonca ve Korece (CJK) yazı tiplerini de etkinleştirir. Önceki grafikte, CJK yazı tipinin, Latin karakter yazı tipinin 15-20 katı kadar karakter içerdiğini görebilirsiniz. Bu yazı tipleri genellikle çok büyüktür ve bu dillerdeki karakterlerin birçoğu, diğer diller kadar sık kullanılmaz.
CSS API'yi ve unicode-range özelliğini kullanmak, dosya aktarımlarını yaklaşık %90 oranında azaltabilir. unicode-range tanımlayıcısı ile her bir bölümü ayrı ayrı tanımlayabilirsiniz. Her dilim yalnızca içeriğiniz bu karakter aralıklarındaki karakterlerden birini içerdiğinde indirilir.
Örnek: Noto Sans JP'de yalnızca "こんち davranışı" sözcüğünü ayarlamak istiyorsanız şunları yapabilirsiniz:
- Kendi WOFF2 dosyalarınızı barındırın.
- WOFF2'yi almak için CSS API'yi kullanın.
- text= parametresi "こんにちは." olarak ayarlanmış CSS API'yi kullanın.
Bu örnekte, CSS API'yi kullanarak kendi içinde WOFF2 yazı tipini barındırmaya kıyasla zaten% 97,5 tasarruf ettiğinizi görebilirsiniz.Bu, API'nin büyük yazı tiplerini unicode aralığına ayırmaya yönelik yerleşik desteği sayesindedir. Bir adım daha ileri gidip tam olarak görüntülemek istediğiniz metni belirterek yazı tipinin boyutunu CSS API yazı tipinin yalnızca% 95,3'üne indirebilirsiniz. Bu, kendi kendine barındırılan yazı tipinden% 99,9 daha küçüktür.
Google Fonts CSS API, yazı tiplerini kullanıcınızın tarayıcısı tarafından desteklenen en küçük ve en uyumlu biçimde otomatik olarak yayınlar. Kullanıcınız WOFF2 desteğine sahip bir tarayıcı kullanıyorsa API, yazı tiplerini WOFF2 biçiminde sağlar. Kullanıcınız eski bir tarayıcı kullanıyorsa API, yazı tiplerini söz konusu tarayıcı tarafından desteklenen bir biçimde sunar. API, her kullanıcının dosya boyutunu azaltmak için gerekli olmayan verileri yazı tiplerinden de kaldırır. Örneğin, ipucu verileri tarayıcılarında ihtiyaç duymayan kullanıcılar için kaldırılır.
Google Fonts CSS API ile web yazı tiplerinizi geleceğe hazırlama
Google Yazı Tipleri ekibi, WOFF2 gibi web yazı tipi teknolojilerinde yenilikler yapmaya devam eden yeni W3C standartlarına da katkıda bulunur. Şu anda üzerinde çalıştığımız projelerden biri, kullanıcıların ekranda kullanıldığı sırada yazı tipi dosyalarının çok küçük bölümlerini yüklemesine ve geri kalanını isteğe bağlı olarak aktarmasına olanak tanıyan Artımlı Yazı Tipi Aktarımı. Bu proje, unicode-range performansını aşıyor. Web yazı tipleri API'mizi kullandığınızda, kullanıcılarınız bu temel yazı tipi aktarma teknolojisi iyileştirmelerini tarayıcılarında kullanıma sunulduğunda alır.
Fonts API'sının güzelliği budur: Kullanıcılarınız, web sitenizde herhangi bir değişiklik yapmadan her bir yeni teknoloji iyileştirmesinden yararlanabilir. Yeni web yazı tipi biçimi mi? Sorun değil. Yeni tarayıcı veya işletim sistemi desteği mi sunuyorsunuz? Bu sorun giderildi. Böylece, web yazı tiplerinizin bakımıyla uğraşmak yerine kullanıcılarınıza ve içeriğinize odaklanabilirsiniz.
Değişken yazı tipleri yerleşik
Değişken yazı tipleri, birden fazla eks arasında çeşitli tasarım varyasyonlarını depolayabilen yazı tipi dosyalarıdır. Google Fonts CSS API'nin yeni sürümünde bunlar için destek bulunmaktadır. Ek bir varyasyon ekseni eklemek, yazı tipinde yeni esneklik sağlar ancak yazı tipi dosyasının boyutunu neredeyse ikiye katlayabilir.
CSS API isteğinizde daha fazla ayrıntı sağladığınızda Google Fonts CSS API, kullanıcıların indirme boyutunu küçültmek amacıyla web sitenizin değişken yazı tipinin yalnızca bir kısmını sunabilir. Bu sayede, sayfa yükleme süreleri uzamadan web'de değişken yazı tipleri kullanılabilir. Bunu bir eksende tek bir değer veya bir aralık belirterek yapabilirsiniz. Hatta tek bir istekte birden fazla eksen ve birden fazla yazı tipi ailesi belirtebilirsiniz. API, ihtiyaçlarınızı karşılayacak şekilde esnektir.
Uygulaması kolay, sizin için optimize edilmiş
Google Fonts CSS API, aşağıdaki özelliklere sahip yazı tipleri yayınlamanıza yardımcı olur:
- Web tarayıcılarıyla daha uyumludur.
- Mümkün olduğunca küçük olmalıdır.
- Hızlı teslim edildi.
- Kullanımı daha kolaydır.
Google Yazı Tipleri hakkında daha fazla bilgi için fonts.google.com adresini ziyaret edin. CSS API hakkında daha fazla bilgi edinmek için API Dokümanları'nı inceleyin.
Teşekkür
leesehee tarafından sunulan hero resim.