10 Mart 2013 Pazar

Google Web Fonts Kullanımı

google_web_fonts_logo
Google 'ın ücretsiz olarak sunmuş oldugu ve Webmaster ların çok işine yarayan,oldukça popüler olan Google Web Fonts un kullanımını ve küçük detaylarını sizlerle paylaşacağım.

Google Web Fonts şu anda tam 622 font ailesine sahip ve zamanla font ailesi sayısı artmakta olan google web fonts basit kullanımı sayesinde kullanıcılarına büyük bir kolaylık sağlamaktadır.


google_web_fonts




Preview Text : yazan yere görüntülemek istediğiniz fontu girebilir ve fontun metninize nasıl bir görünüm kazandırdıgını görebilirsiniz.Ayrıca harf olarak paragraf ve poster şeklindede önizlemeler yapabilirsiniz.



Filter : kısmından ise kalınlık genişlik gibi ayarlamalar yaparak fontları eleyebilirsiniz.

Script: kısmında ise alfabe seçeneğini kullanabilirsiniz, Cyrillic Greek ve latin alfabeleri gibi seçenekler barındıran script kısmında Türkçe karakterler için latin extended i seçerseniz türkçe harflerden dolayı sıkıntı yaşamazsınız.


 Şimdi gelelim Google Web Fonts Kullanımına  ,

Google Web Fonts Nasıl Kullanılır ? 


Kullanmak istediğiniz bir font un üzerine gelin ve Quick Use seçenğine tıklayın.
ben örnek olarak Merriweather Sans adlı fontu seçtim.

google_web_font


Quick use butonuna tıkladıktan sonra yeni bir sayfa açılıcak ve Burda ilk olarak font un stili yani bold normal gibi seçenekleri seçeceğiz istersek bir veya birkaçını aynı anda seçebiliriz fakat şunu unutmayın sağ taraftaki ibre fontun yüklenme hızını göstermekte siz ne kadar çok seçim yaparsanız ibre geriye doğru hareketlenecektir.





google_web_fonts
İkinci seçeneğimizde ise karakter seçimini gösterecektir , yukarıdada belirttiğim gibi latin extended i seçmeniz sizin türkçe karakter sıkıntısıyla karşılaşmanızı engelleyecektir.O yüzden Latin extended i seçmeyi unutmayın.



google_web_font

Üçüncü seçenek ise sitenize eklemeniz gereken kod , yani kodu kullanmak istediğiniz sayfaya entegre etmeniz gerekmekte bunu için ;

  • Standart : direk html sayfanıza ekleyerek kullanabilirsiniz.
  • import :    ise Css dosyanıza eklemeniz için 
 Standart kullanımı seçerek çalışmamıza devam edelim . 

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


Seçmiş oldugunuz linki <head> .... </head> etiketleri arasına yapıştırın.


Ardından font family için ise Css dosyanıza


font-family: 'Merriweather Sans', sans-serif;


seçmiş oldugumuz font ailesini

h1{
font-family: 'Merriweather Sans', sans-serif;
}

şeklinde sınıf oluşturarak Google Web Fonts u  kullanabilirsiniz.

4 yorum:

  1. Merhaba çok güzel içerik çok faydalı ve güzel. Makalenizi beğendim. Sitenizin insanlara faydalı olduğunu düşünüyorum. Web sitenizin beklenen ilgiyi göreceği kanısındayım.

    İyi çalışmalar.

    web tasarım dalaman airport transfer hacamat anadolu millet vekili şair okul site yukseltme

    YanıtlaSil
  2. güzel makale olmuş emeğinize sağlık. çalışmalarınızda başarılar dilerim

    YanıtlaSil
  3. Hocam on numara anlatım olmuş eline yüreğine sağlık @Ali Degismis'a katılmıyorum. Daha fazla içerik eklemen dileğiyle kolay gelsin.

    YanıtlaSil
    Yanıtlar
    1. teşekkür ederim faydalı olduysa ne mutlu bana,ali değişmiş olumsuz bir yorumda bulunmamıs neye katılmadıgınızı tam anlayamadım.
      Bloga izleyici olarak katılırsanız sevinirim.

      Sil

Not: Yalnızca bu blogun üyesi yorum gönderebilir.

//Luckyorange//