İndirilen Font'u Ekleme

28.06.2023

Beğenme

1571

Görüntülenme

İndirilen Font'u Ekleme

Merhaba arkadaşlar iyi çalışmalar. Hocamız HTML dersinde Google Fonts üzerinden font eklemeyi göstermiş ama doğrudan indirilen font u kullanmayı göstermemiş. Ben de size indirdiğiniz bir font dosyasını projemize nasıl dahil edeceğimizi anlatacağım.

İlk olarak, Google Fonts'a gidin ve istediğiniz bir fontu indirin. İndirdiğiniz dosya bir ZIP dosyası olacak. Bu dosyayı çıkartın ve içindeki .ttf uzantılı dosyayı projenizin dizinine kopyalayın.
Ardından, stil dosyanıza (genellikle style.css olarak adlandırılır) gidin ve aşağıdaki kodu ekleyin:


@font-face {
    font-family: 'deneme';       /* Buraya bir isim verin */
    src: url('Caprasimo-Regular.ttf');   /* .ttf dosyasının yolunu ekleyin */
}

Şimdi, stil dosyanızın içinde hangi elementlere stil uygulamak istiyorsanız, onları belirtin. Örneğin, bir h2 başlığınız olduğunu varsayalım:


h2 {
    font-family: 'deneme';   /* Yukarıdaki 'deneme' yazısını burada tekrar kullanın */
}

Son olarak, HTML dosyanızda stil dosyasını link kullanarak çağırmayı unutmayın. Bunun için aşağıdaki kodu <head> bölümüne eklemeniz gerekmektedir:


<link rel="stylesheet" href="style.css">

Yukarıdaki adımları takip ederek, indirdiğiniz fontu projenize ekleyebilir ve stil dosyanızda kullanabilirsiniz.

İYİ ÇALIŞMALAR ...

HTML

CSS

Frontend Web Geliştirme

Yorumlar

Kullanıcı yorumlarını görüntüleyebilmek için kayıt olmalısınız!

Oğuzcan Aktürk

Konum

Mersin, TR

Eğitim

Bilgisayar Programcılığı - Ondokuz Mayıs Üniversitesi

İş Tecrübesi

IT Teknisyeni - Jandarma Genel Komutanlığı