Google Fonts API'yi Kullanmaya Başlama

Bu kılavuzda, web'e yazı tipi eklemek için Google Fonts API'yi nasıl kullanacağınız açıklanmaktadır. sayfalar. Hiçbir programlama yapmanız gerekmez. tek yapmanız gereken özel bir stil sayfasını HTML dokümanınıza bağlayın ve ardından yazı tipine CSS stilinde başvuruda bulunun.

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. Chrome Web Mağazası'ndaki şu yazı tipiyle yaz:

Web'i Güzelleştirin!

Bu cümle sıradan bir metin olduğu için CSS kullanarak görünümünü değiştirebilirsiniz. Dene gölge ekleyerek önceki örnekteki stile bir gölge ekleyerek:

body {
  font-family: 'Tangerine', serif;
  font-size: 48px;
  text-shadow: 4px 4px 4px #aaa;
}

Şimdi metnin altında bir gölge görmeniz gerekir:

Web'i Güzelleştirin!

Üstelik bu, Fonts API ve CSS ile yapabileceklerinizin yalnızca başlangıç.

Genel Bakış

Google Fonts API'yi yalnızca iki adımda kullanmaya başlayabilirsiniz:

  1. İ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">

  2. Bir stil sayfasında, bir öğenin stilini istenen web yazı tipiyle değiştirin: 

    .css-selector {
font-family: 'Font Name', serif;
}

    veya öğenin kendisinde bir satır içi stil kullanılabilir: 

    <div style="font-family: 'Font Name', serif;">Your text</div>

ziyaret edin.

Kullanabileceğiniz yazı tiplerinin listesi için Google Fonts'a bakın.

Stil sayfası URL'sinde yazı tipi ailelerini ve stilleri belirtme

Stil sayfası bağlantınızda hangi URL'nin kullanılacağını belirlemek için, Fonts API temel URL'si:

https://fonts.googleapis.com/css

Ardından, bir veya daha fazla yazı tipi ailesi adı ile birlikte family= URL parametresini ekleyin ve stillerini ayarlayın.

Örneğin, Inconsolata yazı tipi:

https://fonts.googleapis.com/css?family=Inconsolata

Birden fazla yazı tipi ailesi istemek için adları dikey çizgi karakteriyle ayırın (|).

Örneğin, yazı tiplerini Tangerin, Inconsolata ve Droid Sans:

https://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans

Birden fazla yazı tipini istemek, bu yazı tiplerinin tümünü sayfanızda kullanmanıza olanak tanır. (Ancak aşırıya kaçmayın; çoğu sayfa, çok fazla yazı tipine ihtiyaç duymaz ve bir çok sayıda yazı tipi kullanmak sayfalarınızın yavaş yüklenmesini sağlayabilir.)

Google Fonts API, istenen yazı tiplerinin normal sürümünü varsayılandır. Başka stiller veya ağırlıklar istemek için öğe adına iki nokta üst üste (:) ekleyin. Yazı tipi ve virgüllerle ayrılmış stil veya ağırlıkların bir listesi (,) gelir.

Ö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 için yazı tipinin Google Fonts'taki girişine bakın.

İstediğiniz her stil için tam adı veya kısaltma; ağırlıklar için alternatif olarak sayısal bir ağırlık belirtebilirsiniz:

Stil Belirticiler
italik italic veya i
kalın bold veya b ya da 700 gibi bir sayısal ağırlık
kalın italik bolditalic veya bi

Örneğin, Cantarell italik ve Droid Serif kalın harflerini istemek için, istediğiniz aşağıdaki URL'lerden oluşur: 

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

Yazı tipi görüntüleme'yi kullan

font-display şunları yapmanıza olanak tanır: yazı tipi kullanılamadığında ne olacağını kontrol edin. Başka bir değer belirtme genellikle uygun olan auto parametresinden daha yüksek bir değer sağlar.

Sorgu dizesi display parametresinde istediğiniz değeri iletin: 

https://fonts.googleapis.com/css?family=Roboto&display=swap

Komut dosyası alt kümelerini belirtme

Google Font Directory'deki bazı yazı tipleri birden fazla alfabeyi (örneğin, Latin, Kiril ve Yunanca) desteklemelidir. Siparişte alt küme parametresinin indirilmesi gerektiğini belirtmek için sonuna eklendi.

Örneğin, Roboto Mono yazı tipi kullanılırsa URL şöyle olmalıdır:

https://fonts.googleapis.com/css?family=Roboto+Mono&subset=cyrillic

Bölgenin Yunan alt kümesini istemek için Roboto Mono yazı tipi kullanılırsa URL şöyle olmalıdır:

https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek

Roboto Mono yazı tipi kullanılırsa URL şöyle olmalıdır:

https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek,cyrillic

Varsa Latin alt kümesi her zaman dahil edilir ve belirtilmesi gerekmez. İstemci tarayıcısı unicode aralığını destekliyorsa lütfen (http://caniuse.com/#feat=font-unicode-range) alt küme parametresi yok sayılır; tarayıcı alt kümeler arasından seçim yapar yazı tipiyle desteklenir.

Kullanılabilir yazı tiplerinin ve yazı tipi alt kümelerinin tam listesi için lütfen bkz. Google Fonts.

Yazı tipi isteklerinizi optimize etme

Web sitenizde veya uygulamanızda bir web yazı tipi kullanmak istediğinizde ve hangi harflere ihtiyacınız olacağını önceden bilmeniz gerekir. Bu durum genellikle logo veya başlıkta bir web yazı tipi bulunması.

Bu gibi durumlarda yazı tipinizde bir text= değeri belirtmeniz gerekir. istek URL'si. Bu sayede Google, yazı tipi dosyanızı sizin için optimize edilmiş isteğinde bulunabilirsiniz. Bazı durumlarda bu, yazı tipi dosyasının boyutunu %90'a varan oranda küçültebilir.

Bu özelliği kullanmak için Google Fonts API isteklerinize text= eklemeniz yeterlidir. Örneğin, Örneğin, blogunuzun başlığı için yalnızca Inconsolata kullanıyorsanız, text= değeri olarak ekleyin. Bu durumda istek şu şekilde görünür: örneğin:

https://fonts.googleapis.com/css?family=Inconsolata&text=Hello

Tüm sorgu dizelerinde olduğu gibi değeri de URL olarak kodlamanız gerekir:

https://fonts.googleapis.com/css?family=Inconsolata&text=Hello%20World

Bu özellik, UTF-8'i belirtmenize olanak tanıyan uluslararası yazı tiplerinde de çalışır karakteri ekleyin. Örneğin, "Hola! şöyle temsil edilir:

https://fonts.googleapis.com/css?family=Inconsolata&text=%c2%a1Hola!

Yazı tipi efektlerini etkinleştirme (Beta)

Web sitenizde başlıklar oluştururken veya metinler görüntülerken genellikle metninizi dekoratif bir şekilde biçimlendirin. Google, işinizi kolaylaştırmak için en az çabayla kullanabileceğiniz bir yazı tipi efekti koleksiyonu metinler oluşturmak için kullanabilirsiniz. Örneğin:

Bu bir yazı tipi efektidir.

Bu beta özelliği kullanmak için Google Fonts'unuza effect= eklemeniz yeterlidir isteğinde bulunun ve ilgili sınıf adını, oluşturduğunuz HTML öğelerine ekleyin üç önemli adım var. Yukarıdaki örneğimizde shadow-multiple yazı tipi efektini kullandık. bu durumda 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 içeriği oluşturmak için kullanılan ilgili sınıf adı her zaman font-effect- ön ekiyle gelen efekt adıdır. bu nedenle shadow-multiple için sınıf adı font-effect-shadow-multiple olmalıdır:

<div class="font-effect-shadow-multiple">This is a font effect!</div>

Efekt adlarını dikey çizgiyle ayırarak birden fazla efekt talep edebilirsiniz. karakteri (|) ekleyin.

https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple|3d-float

Sunduğumuz tüm yazı tipi efektlerinin eksiksiz bir listesini burada bulabilirsiniz:

Etki API adı Sınıf Adı Destek
Anaglif anaglyph font-effect-anaglyph Chrome, Firefox, Opera, Safari
Tuğla İşaret brick-sign font-effect-brick-sign Chrome, Safari
Kanvas Baskı canvas-print font-effect-canvas-print Chrome, Safari
Çatlak crackle font-effect-crackle Chrome, Safari
Yoklama decaying font-effect-decaying Chrome, Safari
Yıkım destruction font-effect-destruction Chrome, Safari
Stres distressed font-effect-distressed Chrome, Safari
Eskitme Ahşap distressed-wood font-effect-distressed-wood Chrome, Safari
Emboss 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
Ana hat outline font-effect-outline Chrome, Firefox, Opera, Safari
Yeşil Süsleme putting-green font-effect-putting-green Chrome, Safari
Paslanmış Çelik scuffed-steel font-effect-scuffed-steel Chrome, Safari
Gölge Çoklu shadow-multiple font-effect-shadow-multiple Chrome, Firefox, Opera, Safari
Bölünmüş splintered font-effect-splintered Chrome, Safari
Statik static font-effect-static Chrome, Safari
Stonewash stonewash font-effect-stonewash Chrome, Safari
Üç Boyutlu 3d font-effect-3d Chrome, Firefox, Opera, Safari
Üç Boyutlu Kayan noktalı 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ı tiplerini şekillendirmek için kullanabileceğiniz daha birçok yöntem vardır. kullanabilirsiniz. Başlamanıza yardımcı olacak birkaç fikir sunuyoruz. Daha fazla fikirler, Google aramayı deneyin "css metin efektleri" ve halihazırda web'de bulunan fikirlerin çoğuna göz atabilirsiniz!

Daha fazla bilgi