Eğer bir web site sahibi iseniz ve kendi temanızın kullanıcı iseniz temanızın kendine özgün fontu olması hakkınızdır çünkü eğer web sitesine giren kişi işletim sisteminde çekilen font yok ise temanızın bozuk görünmesine yada bulunduğundan farklı olmasına ve gereken yazı tiplerinden farklı gözükmesine sebep olacaktır. Buna sebeben biraz önçe dediğimiz gibi font’un web sitesine özgün olması en doğru hakkınız. Peki web sitemize fontu nasıl import edebiliriz bunu öğrenicez, google fontu kullanırken yine manuel olarak kullanıcaz yani fontu indirip temanın içerisine ekleyip manuel olarak import edicez aslında google font bunun kolayına gitmiş ama biz fontu indirip import etmeyi tercih edicez çünkü yine eğer fontu indirmeden fontu kullanmaya kalkışırsak internet bağlantısı olmadığında yada local de fontlar aktif olmuyacak buda can sıkıcı hale gelicek bu yüzden yine bunun önüne geçmek için dediğimiz gibi fontu indirip import etmek en doğru seçeneğimiz olacaktır.

Aşağıdaki bağlantıya giderek bir font seçelim biz arama yaparak “Inconsolata” aramasını yaptık ve seçtik böylece fontu sağ üstten indirmiş olduk.

https://fonts.google.com

Fontu zip den çıkartarak temamızın ana dizine gelerek bir “fonts” isimli klasörü oluşturduk ve masaüstüne çıkardığımız zip içerisindekileri fonts klasörüne attık, kendinize göre düzenleme yapabilirsiniz. Şimdi elimizde 2 font dosyası var eğer siz farklı isimde font indirdiyseniz 1’den fazla font sayısı olabilir. Font ‘un içerisindeki birini kullanıcaz bunun da regular olanı seçtik.

style.css dosyasını açıyoruz ve body css önçesine en başa aşağıdakileri ekliyoruz.

@font-face {
  font-family: 'Inconsolata';
  src: url('fonts/Inconsolata-Regular.ttf') format('truetype');
}

Yukarıdaki kodları kendi font isimleri ile değiştirmelisiniz peki bu isimleri nereden aldı derseniz google font sitesinden seçtiğiniz alanda indirmeden önçe hemen altta font un kendine özgün isminin yer aldığını görebilirsiniz.

Not: Klasördeki font ismini değiştirmeyin.

Aşağıdaki css de görüldüğü gibi ek olarak body verdiğim için temanızda özel olarak verilmeyen “font-family:” yerler hepsi body den adayacaktır. Yada hepsinin adını “font-family:” karşılığında “‘Inconsolata’, monospace;” eklemelisiniz bu sizin tercihiniz.

“font-family” karşılığındaki ismini yine google font sitesinden font sayfasından bakabilirsiniz.

body {
	text-align:normal;
	font-family: 'Inconsolata', monospace;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	font-stretch: normal;
	font-size: 13px;
	margin: 0 auto;
	padding: 0;
	max-width:100%;
}

Böylece bunları istediğiniz gibi arttıra bilirsiniz mesela faklı fontlar ekleyerek kullanabilirsiniz. tek yapmanız gereken ikinci “font-face {” ekleyerek ve içerisindeki alanları doğru yapılandırmak.

Kolay gelsin.

Bu Sayfa İçin Etiketler ?

Bu Yazı Hakkında Görüşlerinizi Yazabilirsiniz.