İndirilen Font'u Ekleme

28.06.2023

1021

Views

İ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

Comments

You need to log in to be able to comment!

Oğuzcan Aktürk

Location

Mersin, TR

Education

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

Job Experience

IT Teknisyeni - Jandarma Genel Komutanlığı