Bu kılavuzda, web sayfalarınıza yazı tipi eklemek için Google Fonts API'yi nasıl kullanacağınız açıklanmaktadır. Herhangi bir programlama yapmanıza gerek yoktur. Tek yapmanız gereken HTML dokümanınıza özel bir stil sayfası bağlantısı eklemek ve ardından yazı tipine bir CSS stilinde başvurmaktır.
Kısa bir örnek
Bir örnekle açıklayalım. Aşağıdaki HTML kodunu kopyalayıp bir dosyaya yapıştırın:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Tangerine">
<style>
body {
font-family: 'Tangerine', serif;
font-size: 48px;
}
</style>
</head>
<body>
<div>Making the Web Beautiful!</div>
</body>
</html>
Ardından dosyayı modern bir web tarayıcısında açın. Aşağıdaki yazı tipinde Mandalina adlı yazı tipiyle bir sayfa göreceksiniz:
Bu cümle normal bir metin olduğundan, CSS'yi kullanarak görünümünü değiştirebilirsiniz. Önceki örnekte verilen stile gölge eklemeyi deneyin:
body {
font-family: 'Tangerine', serif;
font-size: 48px;
text-shadow: 4px 4px 4px #aaa;
}
Artık metnin altında bir gölge görmeniz gerekir:
Bu da Fonts API ve CSS ile yapabileceklerinizin yalnızca başlangıcı.
Genel bakış
Yalnızca iki adımda Google Fonts API'yi kullanmaya başlayabilirsiniz:
İstediğiniz web yazı tiplerini istemek için bir stil sayfası bağlantısı ekleyin:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Font+Name">
İstenen web yazı tipini kullanarak bir öğeye stil ekleyin:
.css-selector { font-family: 'Font Name', serif; }veya öğenin kendisinde bir satır içi stil kullanarak:
<div style="font-family: 'Font Name', serif;">Your text</div>
Kullanabileceğiniz yazı tiplerinin listesi için Google Fonts konusuna bakın.
Stil sayfası URL'sinde yazı tipi ailelerini ve stillerini belirtme
Stil sayfası bağlantınızda hangi URL'nin kullanılacağını belirlemek için Google Fonts API temel URL'siyle başlayın:
https://fonts.googleapis.com/css
Ardından, bir veya daha fazla yazı tipi ailesi adı ve stiliyle family= URL parametresini ekleyin.
Örneğin, Inconsolata yazı tipini istemek için:
https://fonts.googleapis.com/css?family=Inconsolata
Birden fazla yazı tipi ailesi istemek için adları dikey çizgi karakteriyle (|) ayırın.
Örneğin, Tangerine, Inconsolata ve Droid Sans yazı tiplerini istemek için:
https://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans
Birden fazla yazı tipi isteğinde bulunmak, sayfanızda bu yazı tiplerinin tümünü kullanmanıza olanak tanır. (Ancak aşırıya kaçmayın; çoğu sayfada çok fazla yazı tipi gerekmez ve çok sayıda yazı tipi istemek sayfalarınızın yavaş yüklenmesine neden olabilir.)
Google Fonts API, varsayılan olarak istenen yazı tiplerinin normal sürümünü sağlar. Başka stiller veya ağırlıklar istemek için yazı tipinin adına iki nokta üst üste (:) ve ardından virgülle ayrılmış stil veya ağırlık listesi (,) ekleyin.
Örneğin:
https://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans
Belirli bir yazı tipi için hangi stillerin ve ağırlıkların kullanılabildiğini öğrenmek üzere yazı tipinin Google Fonts'taki listesine bakın.
İstediğiniz her stil için tam adı veya kısaltmayı kullanabilirsiniz; ağırlıklar için alternatif olarak sayısal bir ağırlık belirtebilirsiniz:
| Stil | Belirteçler |
|---|---|
| italik | italic veya i |
| kalın | bold veya b ya da 700 gibi sayısal bir ağırlık |
| kalın italik | bolditalic veya bi |
Örneğin, Cantarell italik ve Droid Serif kalın karakterlerini istemek için aşağıdaki URL'lerden herhangi birini kullanabilirsiniz:
https://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:b https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:700
font-display'i kullanma
font-display, yazı tipi kullanılamadığında
ne olacağını kontrol etmenizi sağlar. Varsayılan auto dışında bir değer belirtmek genellikle uygundur.
display sorgu dizesi parametresine istediğiniz değeri iletin:
https://fonts.googleapis.com/css?family=Roboto&display=swap
Komut dosyası alt kümelerini belirtme
Google Yazı Tipi Dizini'ndeki bazı yazı tipleri birden fazla alfabeyi destekler (örneğin Latin, Kiril ve Yunanca gibi). Hangi alt kümelerin indirilmesi gerektiğini belirtmek için alt küme parametresinin URL'ye eklenmesi gerekir.
Örneğin, Roboto Mono yazı tipinin Kiril alt kümesini istemek için URL şöyle olur:
https://fonts.googleapis.com/css?family=Roboto+Mono&subset=cyrillic
Roboto Mono yazı tipinin Yunanca alt kümesini istemek için URL şu şekilde olacaktır:
https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek
Roboto Mono yazı tipinin hem Yunan hem de Kiril alt kümelerini istemek için URL şu şekilde olacaktır:
https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek,cyrillic
Latin alt kümesi, varsa her zaman dahil edilir ve belirtilmesi gerekmez. İstemci tarayıcısı, unicode aralığını (http://caniuse.com/#feat=font-unicode-range) destekliyorsa alt küme parametresinin göz ardı edileceğini; tarayıcı, metni oluşturmak için gerekeni almak amacıyla yazı tipinin desteklediği alt kümeler arasından seçim yapar.
Mevcut yazı tipleri ve yazı tipi alt kümelerinin tam listesi için lütfen Google Fonts konusuna bakın.
Yazı tipi isteklerinizi optimize etme
Çoğu zaman, web sitenizde veya uygulamanızda bir web yazı tipi kullanmak istediğinizde hangi harflere ihtiyacınız olacağını önceden bilirsiniz. Bu durum genellikle bir logo veya başlıkta web yazı tipi kullandığınızda ortaya çıkar.
Bu durumlarda, yazı tipi isteği URL'nizde bir text= değeri belirtmeyi düşünmelisiniz. Bu, Google'ın 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 Google Fonts API isteklerinize text= eklemeniz yeterlidir. Örneğin, Inconsolata'yı yalnızca blogunuzun başlığı için kullanıyorsanız başlığı text= değeri olarak girebilirsiniz. İstek şu şekilde görünür:
https://fonts.googleapis.com/css?family=Inconsolata&text=Hello
Tüm sorgu dizelerinde olduğu gibi, değeri URL olarak kodlamanız gerekir:
https://fonts.googleapis.com/css?family=Inconsolata&text=Hello%20World
Bu özellik uluslararası yazı tiplerinde de kullanılabilir ve UTF-8 karakterlerini belirtmenize olanak tanır. Örneğin, ¡Hola! şu şekilde temsil edilir:
https://fonts.googleapis.com/css?family=Inconsolata&text=%c2%a1Hola!
Yazı tipi efektlerini etkinleştirme (Beta)
Web sitenizde başlıklar veya görüntülü metinler oluştururken metninizi dekoratif bir şekilde biçimlendirmek istersiniz. Google, çalışmanızı kolaylaştırmak için, en az çabayla şık görünen metinler oluşturmak üzere kullanabileceğiniz bir yazı tipi efektleri koleksiyonu sunmuştur. Örneğin:
Bu beta özelliği kullanmak için Google Fonts API isteğinize effect= eklemeniz ve ilgili sınıf adını etkilemek istediğiniz HTML öğelerine eklemeniz yeterlidir. Yukarıdaki örnekte shadow-multiple yazı tipi efektini kullandık. Dolayısıyla istek şöyle görünür:
https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple
Efekti kullanmak için ilgili sınıf adını HTML öğelerinize ekleyin. İlgili sınıf adı, her zaman font-effect- ön ekiyle efekt adının başındadır. Bu nedenle shadow-multiple için sınıf adı font-effect-shadow-multiple olur:
<div class="font-effect-shadow-multiple">This is a font effect!</div>
Efekt adlarını dikey çizgi karakteriyle (|) ayırarak birden fazla efekt isteyebilirsiniz.
https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple|3d-float
Sunduğumuz tüm yazı tipi efektlerinin tam listesini aşağıda bulabilirsiniz:
| Etki | API adı | Sınıf Adı | Destek |
|---|---|---|---|
| Anaglif | anaglyph |
font-effect-anaglyph |
Chrome, Firefox, Opera, Safari |
| Tuğla | brick-sign |
font-effect-brick-sign |
Chrome, Safari |
| Kanvas Baskı | canvas-print |
font-effect-canvas-print |
Chrome, Safari |
| Çatlama | crackle |
font-effect-crackle |
Chrome, Safari |
decaying |
font-effect-decaying |
Chrome, Safari | |
| Yıkım | destruction |
font-effect-destruction |
Chrome, Safari |
| Sıkıntılı | distressed |
font-effect-distressed |
Chrome, Safari |
| Eski Ahşap | distressed-wood |
font-effect-distressed-wood |
Chrome, Safari |
| Kombos | emboss |
font-effect-emboss |
Chrome, Firefox, Opera, Safari |
| Yangın | fire |
font-effect-fire |
Chrome, Firefox, Opera, Safari |
| Ateş Animasyonu | fire-animation |
font-effect-fire-animation |
Chrome, Firefox, Opera, Safari |
| Kırılgan | fragile |
font-effect-fragile |
Chrome, Safari |
| Çimen | grass |
font-effect-grass |
Chrome, Safari |
| Buz | ice |
font-effect-ice |
Chrome, Safari |
| Mitoz | mitosis |
font-effect-mitosis |
Chrome, Safari |
| Neon | neon |
font-effect-neon |
Chrome, Firefox, Opera, Safari |
| Özet | outline |
font-effect-outline |
Chrome, Firefox, Opera, Safari |
| Yeşil Koyulaştırma | putting-green |
font-effect-putting-green |
Chrome, Safari |
| Doğal Çelik | scuffed-steel |
font-effect-scuffed-steel |
Chrome, Safari |
| Birden Çok Gölge | shadow-multiple |
font-effect-shadow-multiple |
Chrome, Firefox, Opera, Safari |
| Parçalı | splintered |
font-effect-splintered |
Chrome, Safari |
| Statik | static |
font-effect-static |
Chrome, Safari |
| Çatal yıkama | stonewash |
font-effect-stonewash |
Chrome, Safari |
| Üç Boyutlu | 3d |
font-effect-3d |
Chrome, Firefox, Opera, Safari |
| Üç Boyutlu Kayan noktalı reklam | 3d-float |
font-effect-3d-float |
Chrome, Firefox, Opera, Safari |
| Klasik | vintage |
font-effect-vintage |
Chrome, Safari |
| Duvar kağıdı | wallpaper |
font-effect-wallpaper |
Chrome, Safari |
Yazı tiplerinizi biçimlendirmenin daha pek çok yolu vardır ve CSS aracılığıyla pek çok şey mümkündür. Başlamanıza yardımcı olacak birkaç fikir sunuyoruz. Daha fazla fikir için Google'da "css metin efektleri" araması yapmayı deneyin ve web'de halihazırda bulunan fikirlerin birçoğuna göz atın.
Daha fazla bilgi
- Google Fonts'ta Google Fonts API tarafından sağlanan yazı tipi ailelerinin tam listesini inceleyin.
- Yazı tiplerini yükleme üzerinde daha fazla kontrole sahip olmak için Web Yazı Tipi Yükleyici'yi nasıl kullanacağınızı öğrenin.
- Teknik Konular sayfasından Google Fonts API'nin işleyiş şekli hakkında daha fazla bilgi edinin.