Google Web Fonts Kullanımı

22 Haziran 2015

minimalcoding

2495 0

Google Web Fonts Kullanımı

Bir önceki konumuzda @font-face Css ile Özel Font Kullanımından bahsetmiştik, buna ek olarak Google’ın tamamen ücretsiz olarak sunduğu Google Web Fonts servisinden de bahsedelim istedik. İçerisinde 698 tane font ailesini barından bu servis ile sitelerinizde özgürce (lisans derdi olmadan) kullanabilirsiniz. Bu siteye https://www.google.com/fonts adresinden ulaşabilirsiniz. Kullanımı son derece basit olan Google Fonts yapısına daha yakından bakalım.

Google Web Fonts Sitesine girdiğimizde aşağıdaki site görünümü ile karşılaşıyoruz

Search kısmına (698 font families shown yazan yerin hemen altındaki input ) aramak istediğiniz font yapısını girebilirsiniz.

Filters kısmından yazıların taşımış olduğu karakteristik özelliklerini ayarlayabilirsiniz örneğin Serif (“tırnaklı font”) özelliğini taşıyan ya da San-Serif ( tırnaksız font) olanları listele gibi..

Thickness,Slant,Width sırasıyla Kalınlık, Eğimli, Genişlik gibi özellikleri düzenleyebilirsiniz

Script kısmından kullanılacak olan alfabe yapısını seçebilirsiniz, aslında en önem verdiğimiz yerleden bir tanesi burası çünkü kullanılacak olan fontun Türkçe karakter desteği taşıma özelliğini burdan ayarlıyoruz. Eğerki fontumuzun Türkçe karakter desteği vermesini istiyorsak latin extended’i seçmemiz yeterli olacktır. Türkçe destek veren anlık 367 font bulunmaktadır.

Sağ kısımda yani önizleme ekranında öncelikli olarak aktif gelen ekran sentence (hissetme) ekranı eğer isterseniz değişik modlarda da önizleme yapabilirsiniz. (Word , Paragraph , Poster)

Preview Text bu alana önizlemede görmek istediğiniz metni girebilir ya da açılır pencereden farklı önizleme yöntemlerini deneyebilirsiniz.

Size kısmından yazmış olduğunuz metnin font boyutunun önizlemsini gerçekleştirebilirsiniz.

Sorting kısmından fontların listelenme durumunu güncelleye bilirsiniz.

Sırasıyla önizleme ekranında bulunan bu butonlardan da bahsedelim, anlaşılır olması açısından yapıyı numaralandırdık.

1) See all Style : Bu butona tıkladığımızda açılan ekranda fontun desteklemiş olduğu style özelliklerini görürüz , kalın, italik, ince gibi.

2) Qucik use : Bu butona tıkladığımızda hızlı kullanım ekranına geçmiş oluyoruz eğer sitemizde sadece bir font kullacak isek bu yöntemi kullanabiliriz.

3) Pop Out : Bu butona tıkladığımızda açılan pencereden fontun taşımış olduğu character setine ulaşmış oluyoruz aynı zamanda fontun istatistik vb bilgilerine de buradan ulaşabilirsiniz.

4) Add to Collection : 2 ya da daha fazla font yapısını sitemizde kullanacak isek buraya tıklamanız yeterli bir nevi sepete at mantığında çalışmakta font beğenip tıklayarak arşivinizi genişlete bilirsiniz, daha sonra sepette bulunan fontları Use diyerek kullanabilirsiniz.

Tüm ayarlamalarımızı yaptık ve use butonuna tıkladık. Şimdi Google Web Fontun site içinde kullanıma bakalım;

1) Choose the styles you want: Bu kısımda kullanmak istediğiniz karakteristik özelliği seçiyoruz bold, normal, light yanlız unutmayın sadece ihtiyaç duyduğunuz karakteristik özellikleri seçin ekstra özellikler sitenizin açılma performansını etkilyecektir. Sağ tarafta bulunan gösterge ikonu size yardımcı olacaktır.

2) Choose the character sets you want: Bu kısım daha öncede bahsetmiştik türkçe karakter desteği olması için Latin extended’i seçili hale getirmeyi unutmayın.

3) Add this code your site: Bu alanda sitemize 3 farklı yöntem ile font ailesini çağıra biliyoruz. bu yapıdaki 1. seçeneğimiz

Standart Oluşturulan bu kodu html sayfamızın head tagları arasına ekleyebiliriz.

XHTML

<link href='http://fonts.googleapis.com/css?family=Inconsolata&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

1
2
3
4
5
6
7

<link href='http://fonts.googleapis.com/css?family=Inconsolata&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
@import bu kodu stil doysamızın içine koyarak fontların stil dosyamızdan yüklenmesini sağlayabiliriz.

CSS

@import url(http://fonts.googleapis.com/css?family=Inconsolata&subset=latin,latin-ext);

1
2
3
4
5
6
7

@import url(http://fonts.googleapis.com/css?family=Inconsolata&subset=latin,latin-ext);

Javascript son olarak javascript ile fontlarımızı sitemize çağıra biliriz.




<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Inconsolata::latin,latin-ext' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>

WebFontConfig = {

google: { families: [ 'Inconsolata::latin,latin-ext' ] }

};

(function() {

var wf = document.createElement('script');

wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +

'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';

wf.type = 'text/javascript';

wf.async = 'true';

var s = document.getElementsByTagName('script')[0];

s.parentNode.insertBefore(wf, s);

})(); </script>

Google Web Fonts Kullanımı

Yorum yap