Eğer bir tema kullanıcı iseniz temanızın kendine özgün fontu olması en doğru yoldur çünkü eğer web sitesine giren kişi işletim sisteminde çeken font yok ise temanın bozuk görünmesine yada bulunduğundan olması gereken yazı tiplerinden farklı gözükecektir. Buna sebeben biraz önçe dediğimiz gibi font’un web sitesine özgün olması en doğru seçenektir. Peki web sitemize fontu nasıl mont 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 edicez çünkü yine eğer fontu indirmeden fontu kullanmaya çalışı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çenek olacaktır.

Neyse önçelikle aşağıdaki bağlantıya giderek bir font seçelim biz arama yaparak “Inconsolata” aramasını yaptık ve fontu sağ üstten indirdik.

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 1den 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.

“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%;
}

Son olarak 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 ?

Bir Yorum Yazın