Google Fonts, v2 API güncellemesindeki değişken yazı tiplerini artık tam olarak desteklemektedir. Tek ve birden fazla yazı tipi ailesini nasıl arayacağınızı ve eksen aralıklarının nasıl belirtileceğini açıklayacağız. Değişken yazı tipleriyle ilgili ayrıntılı bilgi edinmek için TypeNetwork sitesinde David Berlow'un yaptığı etkileşimli şekilde resmedilmiş bu broşürle daha fazla bilgi edinin.
Yenilikler
Her şey yeni bir temel URL ile başlar:
https://fonts.googleapis.com/css2
Her ailede stilleri belirtmek için kullanılan söz dizimi, değişken tasarım "yazım alanları"nı açıklayan şekilde değiştirildi.
Hızlı başlangıç kılavuzları
Bu HTML dosyasını kopyalayıp bir dosyaya yapıştırın:
<html>
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Crimson+Pro">
<style>
body {
font-family: 'Crimson Pro', serif;
font-size: 48px;
}
</style>
</head>
<body>
<div>Making the Web Beautiful!</div>
</body>
</html>
Sayfayı açmak için tarayıcı kullanılarak sayfa Crimson Pro yazı tipinde "Web'i Güzel Hale Getirme" metni oluşturulmalıdır.
Birden fazla aile
Birden fazla aile istemek için her ailenin family= parametresini belirtin.
Örneğin, Crimson Pro ve Literata yazı tiplerini istemek için:
https://fonts.googleapis.com/css2?family=Crimson+Pro&family=Literata
Bu HTML dosyasını kopyalayıp bir dosyaya yapıştırın:
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro&family=Literata">
<style>
body {
font-size: 48px;
}
div:nth-child(1) {
font-family: 'Crimson Pro', serif;
}
div:nth-child(2) {
font-family: 'Literata’, serif;
}
</style>
</head>
<body>
<div>Making the Web Beautiful!</div>
<div>Making the Web Beautiful!</div>
</body>
</html>
Sayfayı açmak için tarayıcı kullanılarak sayfa önce Crimson Pro'da, sonra da Literata'da "Web'i Güzel Hale Getirme" metni oluşturulmalıdır.
Eksen aralıkları
Değişken yazı tipleri, genellikle ek gecikme olmadan sürekli stiller sunar. Bu, duyarlı tasarımla ilgilidir. Bu dinamik yazı tipi, bir sayfada 100 ila 900 arasındaki tüm ağırlıkları sunarak ve bazı koşullara göre ağırlığı duyarlı bir şekilde değiştirerek sürekli stil aralıkları kullanır.
Değişken yazı tipi ekseni aralığı istemek için 2 değeri .. ile birleştirin
| Yazı tipleri | İstek |
|---|---|
Crimson Pro [wght 200-900] |
https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@200..900 |
Crimson Pro İtalik [wght 200-900] |
https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@1,200..900 |
Crimson Pro Bold Italic ve [wght 200-900] |
https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,700 |
Ağırlık gibi bireysel stiller
Stil özellikleri olmadan API, istenen ailenin varsayılan stilini sağlar. Belirli ağırlıklar gibi diğer bağımsız stilleri istemek için yazı tipi ailesinin adından sonra iki nokta üst üste (:) işareti, ardından alfabetik sıralamayla bir eksen özelliği anahtar kelimesi, "@" işaretinde (@) ve bu eksen özellikleri için bir veya daha fazla değer listesi ekleyin.
Bu örneklerde, işlem sırasında bunu görebilirsiniz.
| Yazı tipleri | İstek |
|---|---|
| Crimson Pro (varsayılan) | https://fonts.googleapis.com/css2?family=Crimson+Pro |
| Crimson Pro Kalın | https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@700 |
| Crimson Pro Normal ve Kalın | https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;700 |
| Crimson Pro Bold ve Bold italik | https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,700;1,700 |
Google Fonts, her bir yazı tipi ailesi için kullanılabilen tüm stilleri listeler.
Varsayılan stil
İstek bir eksen için konum veya aralık belirtmediğinde varsayılan konum kullanılır. İtalik eksenin varsayılan konumu 0 (normal) ve ağırlık ekseni için varsayılan değer 400'dür (normal).
Varsayılan konumu içermeyen eksenlere sahip aileler söz konusu olduğunda, bu eksenler için konum belirtmeyen istekler başarısız olur. Örneğin, 500 ile 900 aralığında ağırlık eksenine sahip bir aile isteğinde bulunurken ağırlık konumu belirtilmelidir.
Standart olmayan ağırlıklar
Statik yazı tiplerinde, ağırlık stilleri genellikle 100'ün katları olarak belirtilir (ör. 300, 400, 700). Değişken yazı tipleri hem standart ağırlıkları hem de ara ağırlıkları sunar. Bir ara ağırlık oluşturmak için:
https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@450
Gecikme ve dosya boyutu için optimizasyon
Kullandığınız stiller konusunda net olun. Bu API, istenen stilleri en kompakt yazı tipi grubunda yayınlar. Kullanılmayan stiller istemek, kullanıcılarınızın ihtiyaç duyduklarından daha fazla yazı tipi verisi indirmesine neden olarak daha fazla gecikme yaşanabilir. Yalnızca 3 belirli ağırlık kullanıyorsanız bunları isteğinizde ayrı stiller olarak belirtin. Sürekli bir ağırlık aralığı kullanıyorsanız isteğinizde bu ağırlık aralığını belirtin.
Yazı tipi görüntüleme özelliğini kullan
font-display özelliği, yazı tipi yüklenirken veya başka şekilde kullanılamazken ne olacağını kontrol etmenize olanak tanır. Varsayılan auto dışında bir değer belirtmek genellikle uygundur.
display parametresinde istenen değeri geçirin:
https://fonts.googleapis.com/css2?family=Crimson+Pro&display=swap
Yazı tipi isteklerinizi optimize etme
Çoğu zaman, sitenizde veya uygulamanızda bir web yazı tipi kullanmak istediğinizde, hangi harflere ihtiyaç duyacağınızı önceden bilirsiniz. Bu durum genellikle bir logo veya başlıkta web yazı tipi kullanıldığında meydana gelir.
Bu tür durumlarda, yazı tipi isteği URL'nizde text= değeri belirtmeyi değerlendirin. Bu, Google Fonts'un, isteğiniz için optimize edilmiş bir yazı tipi dosyası döndürmesine olanak tanır. Bazı durumlarda bu, yazı tipi dosyasının boyutunu %90'a kadar küçültebilir.
Bu özelliği kullanmak için API isteğinize text= eklemeniz yeterlidir. Örneğin, blog'unuzun başlığı için yalnızca Inconsolata'yı kullanıyorsanız başlığı text= öğesinin değeri olarak yerleştirebilirsiniz. İstek aşağıdaki gibi görünür:
https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello
Tüm sorgu dizelerinde olduğu gibi, değeri URL olarak kodlamanız gerekir:
https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello%20World
Bu özellik, uluslararası yazı tipleri için de kullanılabilir ve UTF-8 karakterlerini belirtmenize olanak tanır. Örneğin ¡Hola! aşağıdaki şekilde gösterilir:
https://fonts.googleapis.com/css2?family=Comfortaa&text=%c2%a1Hola!
"text=" parametresinin yalnızca bir kez belirtilebileceğini lütfen unutmayın. İstekteki tüm aileler için geçerlidir. Birden fazla ailede farklı metin optimizasyonlarına ihtiyacınız varsa lütfen ayrı API istekleri kullanın.
API URL'leri oluşturma
Güvenlik
Genel olarak, güncellenmiş CSS API'si hangi isteklerin kabul edildiği konusunda orijinal CSS API'sinden daha katıdır.
Genel yönergeler:
- Eksenleri alfabetik olarak listele (
en-USyerel ayar) - Eksen değeri grupları (ör. üçlü) sayısal olarak sıralanmalıdır
- Noktalar çakışamaz veya dokunulamaz (ör.
wght400..500 ve 500..600)
API URL Spesifikasyonu
/css2?family=<spec>[&family=<spec>...][&text=<text>][&display=<display>]
spec: <family_name>[:<axis_tag_list>@<axis_tuple_list>]
family_name: Yazı tipi ailesinin adı
axis_tag_list: <axis>[,<axis>...] // Sorted alphabetically (en-US locale)
axis: Eksen etiketi, ör. ital, wdth, wght
axis_tuple_list: <axis_tuple>[;<axis_tuple>...]
axis_tuple: <value>[,<value>...] // Same length as axis_tag_list
value: <range> | <float>
range: <float>..<float>
float: İlgili eksen aralığında bulunan bir değer
text: İstenen yazı tipinde görüntülenecek metin
display: auto | block | swap | fallback | optional
Eski tarayıcı desteği
Değişken yazı tipi desteği olmayan tarayıcılar, tasarımınızı amaçladığınız şekilde gösteremeyebilir. caiuse öğesinde tarayıcıların değişken yazı tipi desteğini kontrol edin.
Progresif geliştirme uygulayarak eski tarayıcılarda beklenmeyen davranışlardan kaçınabilirsiniz. Değişken yazı tipi özelliklerini kapsamak için CSS'nizde @supports sorgularını kullanın.
Bu örnekte, Markazi Metnin 450 ağırlığını kullanmak istiyoruz, ancak değişken yazı tipi özellikleri desteklenmediğinde Normal (ağırlık 400) veya Aracı (ağırlık 500) olarak geri dönmesi gerekir:
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Markazi+Text:wght@450" />
<style>
* {
font-family: 'Markazi Text';
font-weight: 400;
}
@supports (font-variation-settings: "wght" 450) {
* {
font-family: 'Markazi Text';
font-weight: 450;
}
}
</style>
Markazi+Text:wght@450 CSS isteği, değişken yazı tiplerini destekleyen istemcilere 450 ağırlık, desteklemeyen yazı tiplerine 400 ve 500 ağırlıkları gönderir. Genel olarak, isteğinizin aralığıyla ilgili yedekler eski tarayıcılarda kullanılabilir.
| Axis | Yedekler |
|---|---|
ital |
0, 1 |
wght |
100, 200, 300, 400, 500, 600, 700, 800, 900 |
Bu örneklerde, birkaç farklı istek için eski tarayıcılarda hangi stillerin kullanılabileceği gösterilmektedir.
| İstek | Eski tarayıcılarda kullanılabilen stiller |
|---|---|
ital@0 |
ital@0 |
wght@500 |
wght@500 |
wght@432 |
wght@400;500 |
wght@440..560 |
wght@400;500;600 |
Kullanılabilir değişken yazı tipleri
v2 API'sinde kullanabileceğiniz değişken yazı tipleri tablosunu burada bulabilirsiniz.
Daha fazla bilgi
- Google Fonts API'nin sağladığı yazı tipi ailelerinin tam listesini Google Fonts'ta bulabilirsiniz.
- Google Fonts API'nin nasıl çalıştığı hakkında daha fazla bilgiyi Teknik Konular sayfasında bulabilirsiniz.