0Pricing
CSS Academy · Ders

Google Fonts ve @font-face

Google Fonts'tan harici yazı tipleri yükleyin veya @font-face kuralını kullanarak özel yazı tipleri tanımlayın.

Google Fonts ve @font-face, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.

Özel Yazı Tipleri Neden Kullanılır?

Web uyumlu yazı tipleri yalnızca birkaç seçenek sunar. Özel yazı tipleri, marka kimliğini tam olarak yansıtmanıza olanak tanır. İki temel yaklaşım Google Yazı Tipleri (barındırılan hizmet) ve @font-face (kendi sunucunuzda barındırma) kullanmaktır.

Google Yazı Tipleri Kurulumu

fonts.google.com adresini ziyaret edin, bir yazı tipi ailesi seçin, kalınlıkları belirleyin ve <link> etiketini HTML <head> bölümünüze kopyalayın:

<p>Add these tags to your document's <code>&lt;head&gt;</code>:</p>
<pre><code>&lt;link rel="preconnect" href="https://fonts.googleapis.com"&gt;
&lt;link rel="preconnect" href="https://fonts.gstatic.com" crossorigin&gt;
&lt;link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&amp;display=swap" rel="stylesheet"&gt;</code></pre>

CSS'te Google Yazı Tiplerini Kullanma

Bağlantıyı ekledikten sonra yazı tipine font-family yığınınızda adıyla başvurun:

<h1>Playfair Display Heading</h1>
<p>Roboto body text below the heading.</p>

Google Yazı Tipleri API Parametreleri

display=swap parametresi, Yazı Tipi Görüntüleme Değişimi stratejisini kullanır; metin hemen yedek yazı tipinde görüntülenir, ardından özel yazı tipi yüklendiğinde değiştirilir. Bu, yükleme sırasında metnin görünmez olmasını önler.

@font-face Temelleri

@font-face, kendi sunucunuzda barındırdığınız özel bir yazı tipi dosyasını yüklemenizi sağlar. Yazı tipi ailesi adını ve dosya kaynağını tanımlayın:

<p class="brand-text">Custom brand typeface text</p>

WOFF2: Modern Biçim

WOFF2 (Web Açık Yazı Tipi Biçimi 2) önerilen biçimdir. En iyi sıkıştırmayı sunar (genellikle WOFF'tan %30 daha küçüktür) ve tüm modern tarayıcılar tarafından desteklenir. Her zaman yedek olarak WOFF'u ekleyin.

@font-face ile Birden Fazla Kalınlık

Her kalınlık ve stil birleşimi için bir @font-face bloğu tanımlayın. Tarayıcının doğru dosyayı otomatik olarak seçmesi için aynı font-family adını kullanın:

<p>Regular weight 400 text with <strong>bold weight 700 text</strong> inline.</p>

font-display Özelliği

font-display tanımlayıcısı, yazı tipi yükleme davranışını denetler:

  • swap — yedek yazı tipini hemen gösterir, hazır olduğunda değiştirir (önerilir)
  • block — en fazla 3 saniye boyunca görünmez metin gösterir
  • fallback — kısa bir beklemenin ardından kalıcı yedek yazı tipini kullanır
  • optional — yalnızca önceden önbelleğe alınmışsa kullanır
<p class="swap-text">Text swaps in once Inter loads.</p>

Değişken Yazı Tipi @font-face

Değişken yazı tipleri, sabit kalınlık değerleri yerine eksen aralıklarını tanımlar:

<p class="variable-text">Variable weight text (550)</p>

Kritik Yazı Tiplerini Önceden Yükleme

Görüntülemeyi engelleyen gecikmeyi azaltmak için en önemli yazı tipi dosyanızı önceden yükleyin. Stil sayfasından önce bir <link rel="preload"> ekleyin:

<p>Add this to your document's <code>&lt;head&gt;</code> to preload the font file:</p>
<pre><code>&lt;link rel="preload" href="./fonts/inter.woff2" as="font" type="font/woff2" crossorigin&gt;</code></pre>

İndirmeyi Atlamak için local()

İndirme işleminden önce kullanıcının yazı tipini zaten yüklemiş olup olmadığını denetlemek için src içinde local() kullanın:

<p class="roboto-text">Uses local Roboto if installed</p>

Hızlı Kontrol

Hangi yazı tipi biçimi en iyi sıkıştırmayı ve modern tarayıcılarda en geniş desteği sunar?

Özet

Google Yazı Tipleri, <link> etiketi aracılığıyla barındırılan yazı tiplerini kolayca kullanmanızı sağlar. En iyi performans için WOFF2 biçimini ve font-display: swap değerini kullanarak yazı tiplerini kendi sunucunuzda @font-face ile barındırın. Kritik yazı tiplerini önceden yükleyin ve gereksiz indirmeleri önlemek için local() kullanın.

Sıkça Sorulan Sorular

“Google Fonts ve @font-face” dersi ücretsiz mi?

Evet — “Google Fonts ve @font-face” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.

“Google Fonts ve @font-face” dersinde ne öğreneceğim?

Google Fonts'tan harici yazı tipleri yükleyin veya @font-face kuralını kullanarak özel yazı tipleri tanımlayın. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

CSS Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Google Fonts ve @font-face” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Yazı Tipi Ailesi ve Web Güvenli Yazı Tipleri
  2. Yazı Tipi Boyutu, Ağırlığı ve Stili
  3. Metin Hizalama, Süsleme ve Aralıklandırma
  4. Google Fonts ve @font-face
← CSS Academy Sayfasına Dön