Facebook’ta bir takipçim “Blog başlıklarında Google Web Fonts’u nasıl kullanabilirim?” diye sormuştu.Onun vesilesiyle bir çok kişinin işine yarayacak bu konuya değinmek istedim.
Öncelikle Google Web Fonts’un ne olduğundan bahsedeyim.Google Web Fonts; blogunuzdaki yazı başlıklarında, sidebar başlıklarında, yazı içeriğinde veya sizin belirleyeceğinizde her hangi bir yerdeki bir metin için kullanılan standart fontların yani yazı tiplernin yerine özel fontları kullanmanızı sağlayan ücretsiz bir Google servisidir.
Şimdi adım adım Google fontlarını kullanmaya geçelim.
1.Adım: Google Web Fonts sitesine giderek kullanmak istediğiniz fontu seçin.Fontu eçerken dikkat etmeniz gereken şey Türkçe karakterleri desteklemesidir.Preview Text kısmına türkçe karakter içeren bir metin yazarak, o fontun türkçe karakterleri destekleyip desteklemediğini görebilirsiniz.Kullanmak istediğiniz fonta karar verdikten sonra o fontun köşesindeki Quick use yazısına tıklayın.
2. Adım: Açılan sayfada Add this code to your website diye bir bölüm göreceksiniz.Oradaki kodu şablona ekleyeceğiniz.Şimdi şablonda <head> kodunu bulun ve altına Google fontunun kodunu ekleyin.
Örneğin benim kullanacağım fontun kodu şu:
<link href='http://fonts.googleapis.com/css?family=Courgette' rel='stylesheet' type='text/css'>
!!! Önemli: Bu kodu şablonda <head> kodunun altına ekledikten sonra aşağıda kırmızı renkte gösterdiğim kapanış işaretini de ekliyorum.
<link href='http://fonts.googleapis.com/css?family=Courgette' rel='stylesheet' type='text/css'/>
3.Adım: Google web fontunun bulunduğu sayfada şöyle bir bölm var: Integrate the fonts into your CSS.Buradaki kod da önemli ve kullanacağımız bir kod.İsmi integrasyon kodu.Şimdi neredki fontları değiştirmek istediğimize karar vereceğiz.Örnek olarak ben standart Blogger şablonlarındaki yazı başlıklarını değiştireceğim.Bunun için şablonda ]]></b:skin> skin kodunu bulup hemen üstüne şu kodları ekliyorum:
h3.post-title {
integrasyon kodu}
Örneğin benim kullandığım fontun integrasyon kodu font-family: 'Courgette', cursive; olduğu için kodu şıu şekilde düzenliyorum:
h3.post-title {
font-family: 'Courgette', cursive;
}
Ve Sonuç:
Standart Blogger şablonlarında kayıt içeriğindeki metnin fontunu da benzer şekilde değiştirebilirsiniz.Bunun için yine ]]></b:skin> kodunun üstüne şu kodları ekliyorum:
.post {
font-family: 'Courgette', cursive;}
Bu kodları eklediğimde ortaya çıkan sonuç ise şu:
Yazı içeriği için eklenen kod tüm temalarda aynıdır fakat yazı başlıkları için eklenen kod bazı temalarda farklı olabilir.
Yorum Gönder