Production'da Variable Fontlar: Performansı Mahvetmeden Nasıl Yayınlanır

Variable font, sonsuz kalınlığa sahip tek bir dosyadır. Onları doğru yayınlayan ekipler hem bayt tasarrufu yapıyor hem de ifade gücünün kilidini açıyor. Yanlış yayınlayan ekipler ise kimsenin görmeyeceği animasyonlar için 800 kilobaytlık fontlar yükleyip ilk boyamayı (first paint) engelliyor. Fark font seçiminde değil. Production stratejisinde.

Variable font, sonsuz kalınlığa sahip tek bir dosyadır

Variable font; her kalınlığı, eğimi ve genişliği, arasında interpolasyon yapabileceğin eksenlerle tek bir dosyanın içinde taşır. Bütün satış vaadi de bu, bütün takas da bu. Tek bir ağ isteği, dört ila yedi static font isteğinin yerini alır. Dosya, tek bir static kalınlıktan büyüktür ama static kalınlıkların tamamının toplamından küçüktür. Anlaşma bu.

Format, gömülü varyasyon verisi içeren OpenType'tır. Tarayıcı render anında eksen uç noktaları arasında interpolasyon yapar. Yani font dökümhanesinin yayınlamayı seçtiği tam sayılarla sınırlı kalmadan font-weight: 350 ya da font-weight: 723 değerlerini bedavaya alırsın. Hover-weight animasyon kalıbını mümkün kılan bu, sadece iki kalınlık kullanan bir site için 600 kilobaytlık dosya yükleyen özensiz uygulamayı mümkün kılan da bu.

Yayınlamaya değer dört eksen

Kalınlık, eğim, optical size, genişlik. Çoğu production sitesi bunlardan ikisine ya da üçüne ihtiyaç duyar. Kullandığından fazla eksen yayınlamak boşa giden baytlardır.

OpenType spesifikasyonu beş kayıtlı eksen tanımlar: kalınlık (wght), genişlik (wdth), eğim (slnt), italik (ital) ve optical size (opsz). Bunların ötesinde font dökümhaneleri, gradeden ifade gücüne kadar her şey için özel eksenler tanımlayabilir. Özel eksenler bir type specimen'da eğlencelidir. Production'da dosya boyutuna değmeleri neredeyse hiç görülmez. Tasarımın açıkça başka bir şey gerektirmiyorsa kayıtlı dörtlüye sadık kal.

Kalınlık, iş atıdır

Kalınlık ekseni, çoğu sitenin yayınladığı dört ila yedi static kalınlık dosyasının yerini alır ve variable fontların masrafını tek başına çıkaran eksendir. Regular, Medium, SemiBold, Bold ve ExtraBold'u static dosya olarak yayınlayan bir site beş font isteği yapıyor. Kalınlık eksenli bir variable font ise bir istek yapar ve aradaki her değeri bedavaya sunar.

CSS, herhangi bir elementte font-weight: 300 ile font-weight: 900 arasındadır. font-weight: 450 gibi ara değerler geçerlidir ve doğru render edilir. Bir variable fontun tam 100 ile 900 aralığını kapsadığını varsaymadan önce font dökümhanesinin eksen aralığı dokümantasyonuna bak. Bazıları daha dar bir aralıkla gelir ve sessizce kırpar. Bu da akıcı geçişler yerine ince ama çirkin basamaklar üretir.

Eğim, gerçek italiklerin kilidini açar

Gerçek bir eğim ekseni, dikten italiğe herhangi bir değerde geçmeni sağlar. Çoğu static font çifti bunu ikinci bir dosya olmadan yapamaz. slnt (eğim) ile ital (italik) arasındaki ayrım önemlidir: eğim, dikten oblique'e uzanan sürekli bir aralıktır. İtalik ise ayrı, optik olarak düzeltilmiş bir italik tasarıma geçen ikili bir anahtardır.

Gövde metni için, düzgün bir optik italiğe sahip italik ekseni neredeyse her zaman doğru seçimdir. Animasyon planladığın başlıklar için istediğin eksen eğimdir. CSS font-style: oblique -10deg şeklindedir ve derece değeri eksen aralığına karşılık gelir. Bir değere karar vermeden önce eğimi gerçek başlık boyutunda test et. Aşırı eğim açıları küçük boyutlarda, font dökümhanesinin type specimen'ının ima ettiğinden daha kötü görünür.

Optical size, display yazıyı canlı tutar

Optical size; kontrastı, x-yüksekliğini ve detayı render edilen boyuta göre ayarlar. Bu, bir display yüzü ile bir gövde yüzü arasındaki farkın tek bir fonta gömülmüş halidir. 12px gövde metni için tasarlanmış bir yazı tipinin detayları sadeleştirilmiş, karşı boşlukları (counter) açık ve aralığı cömerttir. 80px'lik bir display kesimi daha keskin kontrasta, daha sıkı aralığa ve daha rafine detaylara sahiptir. Optical size ikisini de tek dosyadan verir.

CSS özelliği font-optical-sizing: auto şeklindedir ve tarayıcının bildirilen font-size değerine göre doğru optik ayarları uygulamasını sağlar. 72px'lik bir başlık için font-variation-settings: 'opsz' 72 ile elle de ayarlayabilirsin. Bu ekseni düzgün destekleyen fontlar (Inter Display ile Inter Text klasik örnektir) optical size birinci sınıf bir özellik olarak tasarlanmıştır. Sonradan akla gelip opsz ekseni ekleyen fontlar anlamlı bir görsel fark yaratmakta nadiren başarılı olur. Hangisini satın aldığını bil.

Genişlik, editoryal eksendir

Genişlik ekseni, font değiştirmeden başlıkları sıkıştırmanı ve pull quote'ları genişletmeni sağlar. Editoryal layoutları şarkı söyletecek hamle budur. CSS özelliği font-stretch'tir ve yüzde değerleri alır: dar için font-stretch: 75%, geniş için font-stretch: 125%.

Bu eksen, responsive editoryal layoutlara sahip sitelerde dosya boyutunu hak eder. Masaüstünde 120px'lik bir başlık, 375px mobilde kolona sığmak için daraltılmak isteyebilir. Genişlik ekseni bunu ikinci bir font yüklemesi yerine tek bir @media sorgusuyla halleder. Roboto Flex, production'a hazır bir variable fontta bulunan en geniş genişlik ekseni aralıklarından birini sunar. Bu ekseni ciddi biçimde kullanmayı planlıyorsan incelemeye değer. Sabit genişlikli başlıkları olan pazarlama siteleri için tamamen atla.

Variable mı static mi, karar ağacı

Üç ya da daha fazla kalınlık kullanıyorsan, yazıyı animasyonla hareketlendiriyorsan ya da optical size'a ihtiyacın varsa variable fontlar kazanır. Aksi halde static kal. Başa baş noktası genellikle iki ila üç kalınlıktır ve hesap dil kapsamı gereksinimlerine göre değişir.

Regular ve Bold yayınlayan bir site, toplamı 40 ila 60 kilobayt tutan iki static dosyayla, 120 ila 200 kilobaytlık tek bir variable fonttan büyük olasılıkla daha iyi durumdadır. Üç kalınlığı geçtiğinde ya da gereksinimlere animasyon eklediğinde hesap kesin biçimde variable lehine döner.

Subsetting dosyayı yarıya indirir

Subsetting kullanmadığın glifleri atar. Bir pazarlama sitesinde bu, 600 kilobaytlık bir variable fontun görünür bir değişiklik olmadan 200 kilobayta inmesi demektir. Tam bir variable font, font dökümhanesinin tasarladığı her glifi taşır: Latin, Latin Extended, Kiril, Yunan, matematiksel operatörler, para birimi sembolleri ve asla kullanmayacağın ligatürler. Subset edilmiş bir variable font ise yalnızca içeriğinin ihtiyaç duyduğunu taşır.

Bunun aracı fonttools kütüphanesinden pyftsubset'tir. Temel bir Latin subset komutu:

pyftsubset font.woff2 \ --output-file=font-subset.woff2 \ --flavor=woff2 \ --unicodes=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 \ --layout-features="kern,liga,calt,rlig"

kern, liga, calt ve rlig layout özelliklerini koru. Tasarım açıkça kullanmıyorsa geri kalan her şeyi at. Araç sıkıştırmayı otomatik halletmediyse çıktıyı bir WOFF2 sıkıştırıcıdan geçir.

Latin, Latin-extended ve dil aralıkları

Doğru subsetting stratejisi, bir Latin dosyası artı her dil için bir dil uzantı dosyasıdır ve yalnızca gerektiğinde yüklenir. Çoğu pazarlama ve ürün sitesi ağırlıklı olarak Latin içerik sunar. Latin subset'i varsayılan olarak yayınla, genişletilmiş karakter setlerini ise @font-face içindeki unicode-range tanımlayıcısıyla yükle. Bu tanımlayıcı, tarayıcıya bir dosyayı yalnızca sayfada eşleşen karakterlerle karşılaştığında getirmesini söyler.

@font-face { font-family: 'YourFont'; src: url('/fonts/yourfont-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; 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; } @font-face { font-family: 'YourFont'; src: url('/fonts/yourfont-latin-ext.woff2') format('woff2'); font-weight: 100 900; font-display: swap; 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; }

Tarayıcı yalnızca mevcut sayfadaki karakterlerle eşleşen dosyaları indirir. Bir Fransızca sayfa Latin Extended dosyasını yükler. Bir İngilizce sayfa yüklemez. Google Fonts'un ölçekte çalışma biçimi bu ve kendi variable fontların için kopyalanacak doğru kalıp da bu.

Zıplamadan yükleme

İlk boyamadan sonra yüklenen bir variable font layoutu kaydırır. Yükleme tarifi ise preload artı font-display swap artı metrikleri eşleştirilmiş bir fallback'tir. Bu isteğe bağlı değil. Variable font tek bir static kalınlıktan büyüktür, yani gelmesi daha uzun sürer, yani layout kayması penceresi daha geniştir.

Preload bağlantısı <head> içinde, herhangi bir stylesheet'ten önce yer alır:

<link rel="preload" href="/fonts/yourfont-latin.woff2" as="font" type="font/woff2" crossorigin >

@font-face içindeki font-display: swap bildirimi, tarayıcıya fallback ile hemen render etmesini ve variable font geldiğinde onunla değiştirmesini söyler. Variable font sonsuz kalınlığa sahip tek bir dosyadır. Stylesheet'ler arasında preload'lu ve preload'suz bildirimleri karıştırırsan yanlış yükleme stratejisi onu boşuna iki kez yükler. Subset dosyası başına bir preload. Bütün kural bu.

---

Yarı bayt boyutunda yayınlanan ve sayfayı asla zıplatmayan variable fontlar mı istiyorsun? Brainy'yi tut, doğru eksenlerle, doğru subsetlerle ve Lighthouse'u yeşil tutan yükleme tarifiyle production tipografi yığınını biz yayınlayalım.

---

Metrikleri eşleştirilmiş fallback'ler

Metrikleri eşleştirilmiş bir sistem fallback'i, fallback'in variable fontla aynı ritimde render edilmesi için size-adjust, ascent-override ve descent-override kullanır. Bu olmadan font-display: swap, görünmez yazıyı variable font geldiğinde oluşan bir layout kaymasıyla takas eder. Metrik eşleştirmesiyle swap gözle algılanamaz hale gelir.

@font-face { font-family: 'YourFont Fallback'; src: local('Arial'); ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; size-adjust: 107%; }

Tam değerler variable fontuna bağlıdır. Fontaine ve next/font gibi araçlar bu değerleri otomatik üretir. Next.js üzerinde geliştiriyorsan next/font bütün fallback zincirini halleder. Değilsen, Fontaine override değerlerini elle hesaplamadan doğrusuna ulaşmanın en hızlı yoludur.

Variable fontların kilidini açtığı dört animasyon kalıbı

Hover-weight, scroll-weight, hover-slant ve reveal-width. Bu dört animasyon yalnızca variable fontlarla mümkündür ve ölçülü kullanıldığında dosya boyutunu hak ederler. Dördünü birden bir sayfaya at, tasarım değil teknoloji demosu gibi okunur.

Hover-weight, hover durumunda font-weight değerini 400'den 700'e geçirir. Eksen verisi fontun içinde olduğu için interpolasyon akıcıdır. Elementte transition: font-weight 0.15s ease bütün CSS'tir. Navigasyon linklerinde, call-to-action metinlerinde ve etkileşimli etiketlerde çalışır.

Scroll-weight, scrollY değerini eksen aralığındaki bir değere eşleyen bir JavaScript scroll dinleyicisiyle font-weight değerini kaydırma konumundan sürer. Aralığı dar tut: 300 ile 700 bilinçli okunur, 100 ile 900 bug gibi okunur. Kullanıcı içeriğe doğru kaydırdıkça yazının ağırlaştığı hero bölümlerine aittir.

Hover-slant, hover durumunda font-style: oblique 0deg değerini font-style: oblique -10deg değerine geçirir. Hover-weight'e göre daha ince bir alternatiftir ve navigasyon linklerinde ve satır içi etkileşimli elementlerde daha rafine okunur. Yalnızca yazı tipi ikisini aynı anda desteklemek üzere tasarlandıysa hover-weight ile birleştir.

Reveal-width, giriş animasyonunun parçası olarak font-stretch değerini canlandırır. Metin font-stretch: 75% ile girer ve 400ms içinde font-stretch: 100% değerine genişler. Fade-in ile birleştirildiğinde mevcut en temiz tipografik reveal kalıplarından biridir. Gövde metninde atla. Yalnızca display yazıya ve hero başlıklarına aittir.

Variable fontları ölçekte yayınlayan yedi site

GitHub, Stripe Press, Vercel, Linear, The New York Times, Apple Music ve Figma production'da variable font yayınlıyor. Ortak kalıpları kopyalamaya değer olanlar.

GitHub, ikisi de GitHub markası için üretilmiş özel variable fontlar olan Mona Sans ve Hubot Sans'i yayınlar. Çoğu UI bağlamında yalnızca kalınlık ekseni. Ara sıra pazarlama bölümleri dışında animasyon yok. Dil grubuna göre agresif subsetting yaptıkları için dosya boyutları sıkıdır.

Stripe Press, editoryal başlıklar için özel bir display variable font kullanır. Kalınlık eksenini sonuna kadar zorlar: display başlıklar ağır kalınlıklarda, alt yazılar hafif kalınlıklarda, hepsi tek dosyadan. Optical sizing, büyük başlık boyutlarında belirgindir. Bu listedeki editoryal olarak en iddialı variable font kullanımı.

Vercel, kendi variable fontu olan Geist'ı, Geist Sans ve Geist Mono olarak yayınlar. Kalınlık ekseni tam aralığı kapsar. Font açık kaynak, Latin subsetting temiz ve iyi yayınlanmış bir variable fontun production Next.js uygulamasında nasıl göründüğü için referans olacak kadar hızlı yükleniyor.

Linear, Inter'ı variable font olarak yayınlar. Kalınlık ekseni UI kalınlıkları arasında dolaşır ve yoğun bir UI için uygun daha dar optik kalınlık aralığında kalır. Bu listedeki en muhafazakâr kullanım ve animasyonun gürültü olacağı, veri yoğun bir ürün arayüzü için en doğru olanlardan biri.

The New York Times, display yazı için özel bir variable serif kullanır. Kalınlık ve optical size eksenlerinin ikisi de aktiftir. Display ile gövde arasındaki geçişler karakter render'ını kaydırmak için optical size eksenini kullanır. Editoryal ölçekte variable font production kullanımı bundan daha sofistike olamaz.

Apple Music, San Francisco'yu hem kalınlık hem optical size eksenleri aktif olan variable biçiminde yayınlar. Büyük ve küçük yazı arasındaki eksen geçişleri o kadar akıcı ki çoğu kullanıcı fontun variable olduğunu fark etmez. Doğru hedef de bu. Font okuma deneyiminin içinde kaybolmalı.

Figma, Inter Display'i uygulama genelinde variable font olarak yayınlar. Bir ürün UI'ı için display yazı tipi seçimi yapıyorsan, Figma'nın küçük UI kalınlıklarındaki Inter ile büyük başlık boyutlarındaki Inter Display arasındaki dengeyi nasıl kurduğunu incele. Kalınlık aralığı disiplini doğrudan kopyalanmaya değer.

Deploy öncesi variable font kontrol listesi

Bir variable font yayınlamadan önce bunu çalıştır, production'da ısıran bugları yakalarsın.

• Subsetting doğrulandı. Hedef unicode aralıklarınla pyftsubset çalıştır. Latin subset dosyasının 200KB altında olduğunu doğrula. İçeriğinin kullandığı karakterlerin çıktıda bulunduğunu örnekle kontrol et.
• Eksenler belgelendi. Fontun hangi eksenleri taşıdığını ve her birinin min ve max aralığını bil. Eksen 700'de bitiyorsa font-weight: 800 bildirme. Sessizce kırpar ve tasarımın yanlış olur.
• Preload ayarlandı. Subset dosyası başına bir <link rel="preload">, <head> içinde, crossorigin özniteliğiyle, yalnızca birincil Latin dosyasına işaret ederek. Kullanmadığın bir dosyayı preload etmek bant genişliğini boşa harcar.
• font-display yapılandırıldı. Her @font-face bloğunda font-display: swap var. DevTools Network sekmesinde fontların hiçbir kritik yol kaynağını render-blocking yapmadığını doğrula.
• Fallback metrikleri eşleştirildi. size-adjust, ascent-override ve descent-override hesaplanmış sistem fallback'i için bir @font-face bloğu. DevTools'ta Slow 3G'ye kısıtlayıp yüklemede layout kaymasını kontrol ederek doğrula. CLS 0 ya da 0'a yakın olmalı.
• Tasarımın kullandığı eksenler onaylandı. CSS'te bildirilen her eksen nihai tasarımda gerçekten kullanılıyor. Font dosyasında olup CSS'te olmayan eksenler yine de bayt ekler. Genişliği kullanmıyorsan o baytları kırpmak için eksen aralığı subsetting'i düşün.
• Lighthouse skoru kontrol edildi. Font yerindeyken production URL'sinde Lighthouse çalıştır. Fontla ilgili LCP ve CLS yeşil olmalı. Değilse fallback metrikleri yanlıştır ya da preload eksiktir.
• CORS header'ları onaylandı. Bir CDN'den ya da harici bir origin'den yüklenen variable fontlar Access-Control-Allow-Origin header'larına ihtiyaç duyar. Network sekmesinde CORS hatalarına bak. CORS başarısızlığı, production'da teşhisi zor, sessiz bir font fallback'i üretir.

SSS

Variable font nedir ve static fonttan farkı nedir?

Variable font, bir yazı tipi tasarımının tam aralığını içeren ve kalınlık, genişlik, eğim ve optical size gibi eksenlerle kontrol edilen tek bir font dosyasıdır. Static font ise tek bir kalınlık ve stildeki tek bir anlık görüntüdür. Pratik fark şu: variable font ile font-weight: 350 kullanabilir ya da kalınlığı CSS'te akıcı biçimde animasyonla değiştirebilirsin. Static fontlar ise yalnızca font dökümhanesinin ayrı dosyalar olarak yayınlamayı seçtiği belirli değerlere izin verir.

Variable fontlar performansı gerçekten iyileştiriyor mu?

Kaç kalınlık yüklediğine bağlı. Toplamı 60KB tutan iki static kalınlık yayınlıyorsan 180KB'lık bir variable fonta geçmek performans gerilemesidir. Toplamı 300KB tutan beş kalınlık yayınlıyorsan 120KB'lık subset edilmiş bir variable fonta geçmek net bir kazançtır. Variable fontların performans argümanı gerçek, ama yalnızca üç kalınlık eşiğini geçtiğinde ve doğru subset ettiğinde geçerli.

UI tasarımı için en iyi variable font hangisi?

Inter, UI tasarımında en yaygın kullanılan variable fonttur. Kalınlık ekseni ekran kullanımı için iyi kalibre edilmiş, temiz subset ediliyor ve Figma onu production referansı olarak yayınlıyor. Responsive editoryal layoutlar için geniş bir eksen aralığına ihtiyaç duyduğunda doğru seçim Roboto Flex. Tek bir yazı tipi ailesinden hem variable sans hem variable mono istiyorsan Recursive incelemeye değer. Daha ifade gücü yüksek bir display yüz isteyen web tasarım prensipleri için Fraunces ve Playfair Display, güçlü optical size ve kalınlık eksenleriyle gelir.

CSS'te font-variation-settings nasıl kullanılır?

font-variation-settings, variable font eksenlerini dört harfli eksen etiketi ve sayısal bir değerle doğrudan ayarlamak için kullanılan düşük seviyeli özelliktir: font-variation-settings: 'wght' 450, 'wdth' 85. Kalınlık ve genişlik gibi kayıtlı eksenlerde yüksek seviyeli CSS özelliklerini (font-weight, font-stretch) tercih et, çünkü doğru miras alır ve doğru birleşirler. font-variation-settings özelliğini yalnızca yüksek seviyeli CSS karşılığı olmayan özel eksenler için kullan.

Variable fontlar layout kaymasına neden olabilir mi?

Evet ve dosya daha büyük olup yüklenmesi daha uzun sürdüğü için static fontlardan daha olası biçimde layout kaymasına neden olurlar. Çözüm, font-display: swap ile metrikleri eşleştirilmiş fallback'in birleşimidir. Bu kombinasyon swap'ı gözle algılanamaz hale getirir. Metrikleri eşleştirilmiş fallback olmadan font-display: swap, görünmez yazıyı font geldiğinde görünür bir layout sıçramasıyla takas eder. İki sorun da birlikte çözülür ya da hiç çözülmez.

Variable fontlar tüm tarayıcılarda destekleniyor mu?

Variable fontlar tüm modern tarayıcılarda desteklenir: Chrome, Firefox, Safari ve Edge. Taban yeterince sağlam, tarayıcı uyumluluğu için static font fallback'ine ihtiyacın yok. Variable fontları desteklemeyen bir tarayıcıdaki kullanıcıların oranı çoğu production sitesi için yüzde birin altında. O uç durum için bir static font yığını değil, sistem fontu fallback'i sun.

Variable font subsetting nasıl çalışır?

Subsetting, içeriğinin asla render etmeyeceği glifleri, Python fonttools kütüphanesinden pyftsubset gibi bir araçla font dosyasından çıkarır. İhtiyacın olan unicode karakter aralıklarını belirtirsin, araç geri kalan her şeyi atar. Tam bir variable font 3.000 glif taşıyor olabilir. Yalnızca Latin içeren bir subset yaklaşık 250 tutar. Sonuç, Latin içerik için aynı görsel çıktıdır ve dosya boyutu kabaca üçte birdir. Tam komut referansı için subsetting sözlük maddesine bak.

Variable fontların gerçekten kilidini açtığı değişim

Variable fontlar bir tipografi meraklısı gösterisi değil. Daha düşük baytla daha fazla ifade yayınlamanın bir yolu ve onları production aracı olarak gören ekipler, daha düşük ağ maliyetiyle daha iyi tipografi yapanlar.

Modern tasarım sistemlerini yürüten Figma variables mimarisi, variable font eksenlerine doğal olarak karşılık gelir. Figma'daki bir font-weight token'ı, fontun içindeki bir eksen değeridir. İyi yapılandırılmış bir token sistemini doğru subset edilmiş bir variable fontla eşleştirirsin ve tasarım dosyasından production'a belirsizlik olmadan yayılan tasarım kararları elde edersin. Bunu hover durumlarında bir OKLCH renk sistemiyle eşleştirirsen, bir araya getirilmiş değil düşünülmüş hissettiren ürün etkileşimleri kurarsın.

Production variable fontlar için çıta "bir variable font yayınladık mı" değil. Çıta doğru subset edilmiş, düzgün preload edilmiş, fallback metrikleri eşleştirilmiş ve yalnızca tasarımın kullandığı eksenleri taşıyan font. Production tipografisi yapan ekipleri tipografi tiyatrosu yapan ekiplerden ayıran standart bu.

Yarı bayt boyutunda yayınlanan ve sayfayı asla zıplatmayan variable fontlar mı istiyorsun? Brainy'yi tut, doğru eksenlerle, doğru subsetlerle ve Lighthouse'u yeşil tutan yükleme tarifiyle production tipografi yığınını biz yayınlayalım.