Web sitelerinde metinlerin nasıl göründüğü, kullanıcı deneyimi açısından büyük önem taşır. HTML'de fontlar, CSS ile özelleştirilerek farklı yazı tipleri, boyutlar ve renkler uygulanabilir. Bu yazıda HTML'de font kullanımı, varsayılan yazı tipleri, Google Fonts entegrasyonu ve özel font yükleme gibi konuları ele alacağız.

HTML ve CSS ile Yazı Tipi (Font) Belirleme

CSS ile yazı tipini belirlemek için font-family özelliği kullanılır.
Temel Kullanım:

<style>
    p {
        font-family: Arial, sans-serif;
    }
</style>

<p>Bu bir paragraf metnidir.</p>

Bu kod, paragrafın Arial fontu ile görüntülenmesini sağlar. Eğer Arial mevcut değilse, bir yedek olarak sans-serif ailesinden bir yazı tipi kullanılır.

Yedek Font Kullanımı:
Tüm cihazlarda aynı font olmayabilir. Bu yüzden yedek fontlar belirlemek gerekir:

<style>
    p {
        font-family: "Times New Roman", Georgia, serif;
    }
</style>

<p>Bu metin serif yazı tipi kullanıyor.</p>

Burada tarayıcı, Times New Roman yoksa Georgia ve diğer serif yazı tiplerinden birini kullanacaktır.

Yazı Tipi Boyutu ve Kalınlığı

Font Boyutu (font-size):
Metin boyutu, px, em, % veya rem ile belirlenebilir.

<style>
    p {
        font-size: 20px;
    }
</style>

<p>Bu metin 20 piksel boyutundadır.</p>

Yazı Tipi Kalınlığı (font-weight):
font-weight özelliğiyle metni kalınlaştırabiliriz:

<style>
    p {
        font-weight: bold;
    }
</style>

<p>Bu metin kalın (bold) olarak görüntülenir.</p>

Alternatif olarak 100 (ince) ile 900 (çok kalın) arasında değerler kullanılabilir.

Google Fonts ile Özel Yazı Tipleri Kullanımı

Google Fonts, web sitelerine ücretsiz yazı tipi eklemek için harika bir kaynaktır.

Google Fonts'tan Font Ekleme
1. Google Fonts adresine gidin.
2. Kullanmak istediğiniz fontu seçin.
3. <link> etiketi ile sayfanıza ekleyin:

<head>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Roboto', sans-serif;
        }
    </style>
</head>

<body>
    <p>Bu metin Google Fonts'tan gelen Roboto fontu ile yazılmıştır.</p>
</body>

Bu yöntem ile web sitenizde Google Fonts’un sunduğu geniş yazı tipi koleksiyonunu kullanabilirsiniz.

Özel Font Kullanımı (@font-face)

Kendi font dosyanızı aşağıdaki gibi web sitenize eklemek için @font-face kullanabilirsiniz.

<style>
    @font-face {
        font-family: 'CustomFont';
        src: url('fonts/CustomFont.woff2') format('woff2'),
             url('fonts/CustomFont.woff') format('woff');
    }

    p {
        font-family: 'CustomFont', sans-serif;
    }
</style>

<p>Bu metin özel bir yazı tipi ile görüntülenmektedir.</p>

Bu yöntem, kendi belirlediğiniz fontları kullanmanızı sağlar. Font dosyanızın .woff2, .woff veya .ttf formatında olması gereklidir.

Varsayılan Font Aileleri

CSS’de kullanılan temel font aileleri şunlardır:
• Serif (Times New Roman, Georgia)
• Sans-serif (Arial, Helvetica, Verdana)
• Monospace (Courier New, Consolas)
• Cursive (Comic Sans MS)
• Fantasy (Impact)
Örneğin, tüm başlıklarda serif font kullanmak için:

<style>
    h1 {
        font-family: serif;
    }
</style>

<h1>Serif font başlık</h1>

CSS ile Yazı Tipi Stilini Değiştirme

Eğik (İtalik) Yazı (font-style):

<style>
    p {
        font-style: italic;
    }
</style>

<p>Bu metin italik olarak görüntülenir.</p>

Küçük Büyük Harf Dönüşümü (text-transform):

<style>
    p {
        text-transform: uppercase;
    }
</style>

<p>Bu metin tamamen büyük harf olarak görüntülenir.</p>

Metin Gölgeleri (text-shadow):

<style>
    h1 {
        text-shadow: 2px 2px 5px gray;
    }
</style>

<h1>Gölge Efektli Metin</h1>

Kendiniz Deneyin!

Aşağıdaki alanda kodun üzerindeki 'Kendin Dene' butonuna tıklayarak fontlarla ilgili değişiklikler yapabilirsiniz:

<style>
    @font-face {
        font-family: 'Poppins';
        src: url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
    }
    body {
        font-family: 'Poppins', sans-serif;
        font-size: 18px;
        font-weight: 400;
    }
</style>

<p>Bu metnin fontunu değiştirerek deneyebilirsiniz.</p>

Kapanış

Bu yazıda HTML ve CSS ile font kullanımı hakkında kapsamlı bilgiler verdik. Google Fonts, özel font yükleme, font stilleri ve metin özelleştirmeleri gibi konulara değindik. Yazı tiplerinin doğru kullanımı, web sitenizin profesyonel ve okunabilir olmasını sağlar.