CSS ile Font Kullanımı

CSS’te font özellikleri, bir web sayfasındaki metinlerin tipografi, boyut, ağırlık, hizalama gibi özelliklerini özelleştirmek için kullanılır. Fontlar, web sitesinin estetiğini ve okunabilirliğini büyük ölçüde etkiler.

Font Ailesi (font-family)

font-family özelliği, metinlerde kullanılacak font türünü belirtir. Birden fazla font tanımlanabilir; ilk font kullanılamazsa diğerleri yedek olarak devreye girer.

p {
    font-family: "Arial", sans-serif;
}

Yukarıdaki örnekte, metin Arial fontu ile görüntülenecek; Arial yoksa sans-serif ailesinden başka bir font kullanılacaktır.

Font Boyutu (font-size)

font-size özelliği, metnin boyutunu belirler. Boyutlar piksel (px), yüzde (%), em veya rem gibi birimlerle ayarlanabilir.

h1 {
    font-size: 2em; /* 1em = varsayılan font boyutu */
}
p {
    font-size: 16px;
}

• em: Mevcut öğenin veya üst öğenin boyutuna göre ayarlanır.
• rem: Tüm sayfa için temel font boyutunu esas alır.

Font Ağırlığı (font-weight)

font-weight özelliği, metnin kalınlığını belirler. normal, bold, bolder, lighter gibi değerlerin yanı sıra 100 ile 900 arasında sayısal değerler de kullanılabilir.

h1 {
    font-weight: bold;
}
p {
    font-weight: 300; /* İnce bir yazı kalınlığı */
}

Font Stili (font-style)

font-style özelliği, metne eğik (italik) veya normal bir görünüm kazandırmak için kullanılır.

em {
    font-style: italic;
}
p {
    font-style: normal;
}

Satır Yüksekliği (line-height)

line-height özelliği, satırların arasındaki mesafeyi ayarlar. Metnin okunabilirliğini artırmak için kullanışlıdır.

p {
    line-height: 1.5;
}

Tüm Font Özelliklerini Tek Satırda Tanımlama

font özelliği ile tüm font ayarlarını tek bir satırda belirtebilirsiniz. Sıralama şu şekildedir: font-style, font-weight, font-size, line-height, font-family.

Web Fontları Ekleme (@font-face ve Google Fonts)
Web fontları, sayfada bulunan metinlerin belirli bir fontla görüntülenmesi için harici fontların kullanılmasına olanak tanır.

Google Fonts Kullanımı
Google Fonts, ücretsiz font seçenekleri sunar. Font eklemek için Google Fonts üzerinden link alabilir veya CSS’e doğrudan ekleyebilirsiniz.

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

CSS’te fontu kullanmak için:

body {
    font-family: "Roboto", sans-serif;
}

@font-face ile Özel Font Ekleme

Kendi font dosyalarınızı yükleyerek de font kullanabilirsiniz.

@font-face {
    font-family: "MyCustomFont";
    src: url("fonts/MyCustomFont.woff2") format("woff2"),
         url("fonts/MyCustomFont.woff") format("woff");
}

body {
    font-family: "MyCustomFont", sans-serif;
}

Özet CSS Kod Örneği

Aşağıda tüm özellikleri gösteren bir örnek verilmiştir:

body {
    font-family: "Arial", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
}

h1 {
    font-family: "Roboto", sans-serif;
    font-size: 2.5em;
    font-weight: bold;
    font-style: italic;
}