Yükleniyor...

CSS’te web yazı tipleri

font-family, boyut ve ağırlığı zaten biliyorsunuz. Web yazı tipleri, ziyaretçinin cihazında olmayabilen bir yüz yükler — @font-face ile bildirin, aile adını başka bir yazı tipi gibi kullanın ve sakin bir yedekle bitirin.

@font-face parçaları

📊 Bir bakışta @font-face

Parça Günlük işi
font-family Uydurduğunuz ve sonra CSS’te kullandığınız ad
src Yazı tipi dosya(ları)nın yeri (url(...) ve sıkça format(...))
font-weight / font-style Bu dosyanın hangi yüz olduğu (regular, bold, italic…)
font-display Yazı tipi yüklenirken metnin davranışı (ör. swap)

İki sakin adım düşünün: @font-face ile yüzü kaydedin, sonra aynı aile adını normal kurallarda çağırın. Birini atlamak, özel dosyayı bulamayan bir yığın bırakır.

Minimal bir @font-face

Yüze net bir ad verin ve src’yi sitenizdeki (veya CDN’deki) bir yazı tipi dosyasına yönlendirin.

Temel @font-face

css
CSS Code 
@font-face {
font-family: "Site Sans";
src: url("/fonts/site-sans.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}

Birden fazla biçim sunun

Modern tarayıcılar woff2 tercih eder. Ardından woff listelemek eski tarayıcıları kapsar. En iyi biçimi önce koyun.

önce woff2 sonra woff

css
CSS Code 
@font-face {
font-family: "Site Sans";
src:
url("/fonts/site-sans.woff2") format("woff2"),
url("/fonts/site-sans.woff") format("woff");
font-weight: 400;
font-style: normal;
}

font-display — metni daha erken göster

font-display: swap tarayıcının önce yedek metin göstermesine, sonra web yazı tipi gelince değiştirmesine izin verir — uzun görünmez boşluktan çoğu zaman daha iyidir.

Display swap

css
CSS Code 
@font-face {
font-family: "Site Sans";
src: url("/fonts/site-sans.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}

Bildirdiğiniz aileyi kullanın

@font-face sonrası kurallarınızda aynı font-family adını çağırın — ve genel bir yedek tutun.

Özel aileyi uygula

css
CSS Code 
body {
font-family: "Site Sans", system-ui, "Segoe UI", sans-serif;
font-size: 1rem;
line-height: 1.6;
}

Sakin bir kendi barındırma alışkanlığı

Yalnızca ihtiyacınız olan ağırlıkları barındırın, woff2 tercih edin, font-display ayarlayın ve her zaman sistem/genel bir yığın tutun.

Yüklenmiş bold yüzlü başlık

css
CSS Code 
@font-face {
font-family: "Site Sans";
src: url("/fonts/site-sans-bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}

h1 {
font-family: "Site Sans", Georgia, serif;
font-weight: 700;
}

Kendiniz deneyin

  1. Özel font-family adı ve woff2 src ile bir @font-face bloğu yazın.
  2. woff için ikinci bir src satırı ekleyin.
  3. font-display: swap ayarlayın.
  4. body üzerine "Your Name", sans-serif uygulayın.
  5. Bold dosyanız varsa 700 ağırlığı için ayrı @font-face ekleyin — sonra bir başlıkta font-weight: 700.

Yaygın hatalar

  • @font-face bildirmek ama o tam adı hiç font-family içinde kullanmamak
  • Yedek yığını atlamak (dosya başarısız olursa kırılır)
  • Kullanmadığınız birçok ağırlık ve stil yüklemek (yavaş sayfalar)
  • font-display stratejisi olmadan metni uzun süre görünmez bırakmak
  • Bu dersi text-shadow / efektlerle karıştırmak (sonraki ders)

Özet

  • @font-face özel bir aile adı kaydeder ve yazı tipi dosyalarına işaret eder
  • woff2 tercih edin, isteğe bağlı woff yedeğiyle
  • font-display: swap çoğu zaman yükleme sırasında metni okunur tutar
  • CSS’te aynı aile adını sistem/genel yedekle kullanın
  • Yalnızca ihtiyaç duyduğunuz yüzleri yükleyin; text-shadow gibi efektler sonraki derstir

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
8
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 28 / 35
Css Ders