Özel Yazı Aileleri
Yapılandırmada fontFamily tanımlayarak Google Fonts'u veya yerel yazı tiplerini entegre edin ve bunları font-* yardımcı sınıflarıyla uygulayın.
Özel Yazı Aileleri, CoddyKit'te ücretsiz bir Tailwind CSS Academy dersidir. Bu, 4 dersinin 2. 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, Tailwind CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Tailwind CSS Academy kursu toplamda 4 dersten oluşur.
Tailwind'in Varsayılan Yazı Tipi Yığınları
Tailwind üç varsayılan yazı tipi ailesi yardımcı sınıfı sağlar: font-sans, font-serif ve font-mono. Her biri, herhangi bir yazı tipi indirmesi gerektirmeden tüm işletim sistemlerinde iyi görünen, özenle seçilmiş bir sistem yazı tipi yığınına karşılık gelir. Çoğu projede bunları, projenize ayırt edici bir tipografik kimlik kazandıran markalı bir web yazı tipiyle değiştirmek veya desteklemek istersiniz.
/* Tailwind's built-in font stacks */
font-sans → ui-sans-serif, system-ui, -apple-system, ...
font-serif → ui-serif, Georgia, Cambria, ...
font-mono → ui-monospace, SFMono-Regular, Menlo, ...
<!-- Using them -->
<p class="font-sans">System sans-serif text</p>
<p class="font-serif">Elegant serif text</p>
<pre class="font-mono">code example</pre>Google Yazı Tipi Seçme
Google Fonts, ücretsiz web yazı tipleri için en yaygın kaynaktır. fonts.google.com adresine göz atın ve markanıza uygun bir yazı tipi seçin. Kullanıcı arayüzü projelerinde temiz ve modern arayüzler için Inter, teknik ürünler için Geist, editoryal zarafet için Playfair Display ve kod düzenleyicileri için JetBrains Mono sık tercih edilir. Gerçekten kullanacağınız kalınlıkları seçin (normal 400 ve yarı kalın 600 çoğu durum için yeterlidir).
<!-- Add to your HTML <head> to load from Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- Or for Playfair Display -->
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">Yazı Tiplerini Tailwind Yapılandırmasına Kaydetme
Yazı tipini bir <link> etiketi veya CSS @import aracılığıyla yükledikten sonra tailwind.config.js içinde theme.extend.fontFamily altına kaydedin. Google Fonts'ta göründüğü biçimiyle, gerekliyse boşlukları da koruyarak yazı tipi adını bir yığın dizisinin ilk öğesi olarak belirtin. Her zaman geri dönüş yazı tipleri ekleyin; web yazı tipi yüklenemezse yedek olarak sistem yazı tipleri kullanılır.
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
display: ['Playfair Display', 'Georgia', 'serif'],
mono: ['JetBrains Mono', 'ui-monospace', 'SFMono-Regular', 'monospace'],
},
},
},
};Yazı Tipi Ailelerini HTML'de Uygulama
Kaydettikten sonra yazı tipini uygulamak için font-{key} yardımcı sınıfını kullanın. sans sınıfını genişlettiyseniz font-sans artık seçtiğiniz yazı tipine karşılık gelir. display gibi yeni bir anahtar eklediyseniz yardımcı sınıf font-display olur. Yazı tipi ailesini her yere miras alınacak en üst ata düzeyinde uygulayın, ardından gerektiğinde belirli bölümlerde üzerine yazın.
<body class="font-sans">
<!-- All text inherits Inter font -->
<h1 class="font-display text-5xl font-bold">
Playfair Display Heading
</h1>
<p class="font-sans text-gray-600">
Regular body text in Inter
</p>
<pre class="font-mono text-sm bg-gray-100 p-4 rounded">
code in JetBrains Mono
</pre>
</body>Varsayılan Yazı Tipi Ailesini Değiştirme
Her öğeye font-sans eklemeden seçtiğiniz yazı tipini her yerde varsayılan yapmak için theme.fontFamily.sans değerini (extend dışında) geçersiz kılarak varsayılan yığını tamamen değiştirin. Ardından font-sans sınıfını body öğenize bir kez uygulayın; body'den miras alan tüm metinler ek sınıf adları olmadan özel yazı tipinizi kullanır.
// tailwind.config.js — Override default sans (replaces the default)
module.exports = {
theme: {
fontFamily: {
sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
// serif and mono keep defaults unless also overridden
},
},
};
<!-- Now font-sans = Inter everywhere -->
<body class="font-sans">
<p>This text automatically uses Inter</p>
</body>Next.js Yazı Tipi Optimizasyonuyla Yazı Tipi Yükleme
Next.js projelerinde Google Fonts CDN bağlantıları yerine next/font modülünü kullanın. Yazı tiplerini derleme zamanında indirir, kendi alan adınızdan sunar, harici istekleri ortadan kaldırır ve yazı tipi boyutlarını otomatik ayarlayarak yerleşim kaymasını önler. CSS değişkeni adını oluşturun ve bu değişkeni kullanarak Tailwind yapılandırmanıza aktarın; böylece Next.js yazı tipi optimizasyonu ile Tailwind arasında sıkı bir bütünleşme kurulur.
// app/layout.tsx
import { Inter } from 'next/font/google';
const inter = Inter({
subsets: ['latin'],
variable: '--font-inter',
});
export default function Layout({ children }) {
return (
<html lang="en" className={inter.variable}>
<body className="font-sans">{children}</body>
</html>
);
}
// tailwind.config.js
theme: {
extend: {
fontFamily: {
sans: ['var(--font-inter)', 'ui-sans-serif', 'system-ui'],
},
},
}Yerel Yazı Tipi Dosyalarını Kullanma
Satın alınmış veya özel yazı tipleri kullanırken bunları yerel olarak barındırın ve bir CSS @font-face kuralıyla tanımlayın. Yazı tipi dosyalarını genel dizininize yerleştirin ve mutlak yollarla başvurun. Özel yazı tipi yüklenirken geri dönüş yazı tiplerini hemen göstermek ve yükleme sırasında görünmez metni önlemek için font-display: swap kullanın. Ardından yazı tipi ailesini her zamanki gibi Tailwind yapılandırmanıza kaydedin.
/* In your global CSS */
@font-face {
font-family: 'BrandFont';
src: url('/fonts/BrandFont-Regular.woff2') format('woff2'),
url('/fonts/BrandFont-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* tailwind.config.js */
theme: {
extend: {
fontFamily: {
brand: ['BrandFont', 'sans-serif'],
},
},
}Yazı Tipi Kalınlığı Yardımcı Sınıfları
Yazı tipi ailesini ayarladıktan sonra kalınlığı Tailwind'in font-{weight} yardımcı sınıflarıyla denetleyin. Yaygın kalınlıklar arasında font-normal (400), font-medium (500), font-semibold (600) ve font-bold (700) bulunur. Kullanmayı planladığınız belirli kalınlıkları Google Fonts'tan yüklediğinizden emin olun; yüklenmemiş bir kalınlık istenirse tarayıcı bunu kendisi oluşturmaya çalışır ve metin kalitesi düşer.
<!-- Load weights 400, 600, 700 from Google -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<!-- Use them with Tailwind weight utilities -->
<p class="font-sans font-normal">Regular body text (400)</p>
<p class="font-sans font-semibold">Semibold text (600)</p>
<h1 class="font-sans font-bold">Bold heading (700)</h1>Değişken Yazı Tipleri
Değişken yazı tipleri tüm kalınlıkları (bazen genişlikleri ve italikleri de) tek bir dosyada barındırır. Böylece HTTP istekleri azalırken tüm kalınlık aralığı desteklenir. Değişken bir yazı tipini bir kez yükleyin ve belirli bir kalınlığın istenip istenmediği konusunda endişelenmeden herhangi bir Tailwind yazı tipi kalınlığı yardımcı sınıfını kullanın. Günümüzde birçok Google Fonts yazı tipinin değişken sürümü bulunur; URL'de ital,wght@ ekseni söz dizimini arayın.
<!-- Variable font: loads once, supports all weights 100-900 -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
<!-- Now ALL weight utilities work with Inter -->
<p class="font-thin">font-thin (100)</p>
<p class="font-normal">font-normal (400)</p>
<p class="font-bold">font-bold (700)</p>
<p class="font-black">font-black (900)</p>Yazı Tipi Yumuşatma Yardımcı Sınıfları
Tailwind, yazı tiplerinin ekranda nasıl oluşturulacağını denetleyen antialiased ve subpixel-antialiased yardımcı sınıflarını sağlar. Gri tonlamalı kenar yumuşatmayı etkinleştirmek için antialiased sınıfını body öğenizde genel olarak uygulayın; bu, modern web yazı tiplerinin yüksek DPI değerine sahip ekranlarda daha net ve ince görünmesini sağlar. Çoğu Tailwind projesinde antialiased, yazı tipi ailesi bildiriminin yanında temel stil olarak eklenir.
<body class="font-sans antialiased text-gray-900">
<!-- Text renders with smooth antialiasing across the page -->
<h1 class="font-bold text-4xl tracking-tight">
Crisp, antialiased heading
</h1>
</body>Yazı Tipi Yüklemesini Test Etme
Chrome DevTools'u açıp Network sekmesine giderek ve Font filtresini uygulayarak özel yazı tiplerinizin doğru yüklendiğini doğrulayın. Yazı tipi dosyalarınızı listede görmelisiniz. Elements panelinde bir metin düğümü seçin ve Computed sekmesini kontrol edin; font-family özelliği geri dönüş yazı tipini değil, çözümlenen yazı tipi olarak özel yazı tipi adınızı göstermelidir. Yükleme sorunlarını yakalamak için farklı görüntü alanı boyutlarında ve bağlantı hızlarında test yapın.
Kısa Kontrol
Tailwind CSS'de özel yazı tipi aileleri konusundaki anlayışınızı test edin.
Ders Özeti
Bu derste şunları öğrendiniz: özel yazı tiplerini geri dönüş yazı tipleri içeren bir dizi olarak theme.extend.fontFamily içine kaydetmeyi, Google Fonts'u bir CDN <link> etiketiyle yüklemeyi veya Next.js'te iyileştirilmiş yükleme için next/font kullanmayı ve net yazı tipi oluşturma için antialiased sınıfını genel olarak uygulamayı. Sırada Tailwind'in varsayılan ölçeğindeki boşlukları doldurmak için özel boşluk değerleri ekleyeceğiz.
Yapay zeka eğitmeniyle HTML öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 30
- Dersler
- 120
Sıkça Sorulan Sorular
“Özel Yazı Aileleri” dersi ücretsiz mi?
Evet — “Özel Yazı Aileleri” 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 Tailwind CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Tailwind CSS Academy kursu toplamda 4 dersten oluşur.
“Özel Yazı Aileleri” dersinde ne öğreneceğim?
Yapılandırmada fontFamily tanımlayarak Google Fonts'u veya yerel yazı tiplerini entegre edin ve bunları font-* yardımcı sınıflarıyla uygulayın. Tailwind 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.
Tailwind CSS Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Tailwind 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 2. dersidir.
“Özel Yazı Aileleri” 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 Tailwind CSS Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Tailwind 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.