Bootstrap Font Family Ekleme

Bootstrap’e Özel Yazı Tipleri Ekleme: Kapsamlı Bir Kılavuz

Bootstrap, web geliştirme için popüler bir çerçevedir ve özelleştirme seçenekleri, onu geliştiriciler arasında çok yönlü bir araç haline getirir. Bu özelleştirme seçeneklerinden biri de özel yazı tiplerini eklemektir. Bu makale, Bootstrap’e özel yazı tiplerini nasıl ekleyeceğinize dair kapsamlı bir kılavuz sağlayacaktır.

Neden Özel Yazı Tipleri Kullanmalısınız?

Özel yazı tipleri, web sitenize benzersiz bir görünüm ve his kazandırmanıza olanak tanır. Varsayılan yazı tiplerinden farklılaşarak, markanızın kimliğini yansıtabilir ve kullanıcı deneyimini geliştirebilirsiniz.

Özel Yazı Tiplerini Ekleme Yöntemleri

Bootstrap’e özel yazı tiplerini eklemenin iki ana yöntemi vardır:

1. CSS Dosyası Kullanma

Bu yöntem, yazı tiplerini doğrudan CSS dosyanıza eklemenizi içerir. Aşağıdaki adımları izleyin:

  • Yazı tipi dosyalarını (.ttf, .otf, .woff) indirin.
  • Yazı tipi dosyalarını web sitenizin kök dizinine yükleyin.
  • CSS dosyanıza aşağıdaki kodu ekleyin:

css
@font-face {
font-family: "Yazı Tipi Adı";
src: url("yazi-tipi.ttf") format("truetype"),
url("yazi-tipi.otf") format("opentype"),
url("yazi-tipi.woff") format("woff");
}

  • Yazı tipini web sitenizde kullanmak için font-family özelliğini Yazı Tipi Adı ile ayarlayın.

2. Google Yazı Tipleri API’si Kullanma

Google Yazı Tipleri API’si, Google’ın yazı tipi kitaplığından yazı tiplerini web sitenize eklemenizi sağlar. Aşağıdaki adımları izleyin:

  • Google Yazı Tipleri web sitesini ziyaret edin: https://fonts.google.com/
  • İstediğiniz yazı tipini seçin ve “Aile Ekle” düğmesine tıklayın.
  • Yazı tipi kodunu kopyalayın.
  • Yazı tipi kodunu web sitenizin <head> bölümüne ekleyin.

html
<link href="https://fonts.googleapis.com/css?family=Yazı+Tipi+Adı" rel="stylesheet">

  • Yazı tipini web sitenizde kullanmak için font-family özelliğini Yazı Tipi Adı ile ayarlayın.

Yazı Tipi Dosyası Formatları

Bootstrap, aşağıdaki yazı tipi dosyası formatlarını destekler:

  • TrueType (.ttf)
  • OpenType (.otf)
  • Web Open Font Format (.woff)

Faydalı Kaynaklar

Sonuç

Bootstrap’e özel yazı tiplerini eklemek, web sitenize benzersiz bir görünüm ve his kazandırmanın kolay bir yoludur. Bu kılavuzda açıklanan yöntemleri izleyerek, özel yazı tiplerini CSS dosyası veya Google Yazı Tipleri API’si kullanarak kolayca ekleyebilirsiniz.

Yayımlandı

kategorisi