Google Web Fonts Kullanımı

Google web fonts Kullanımı resimli anlatım

Google web fonts nasıl kullanılır css de nasıl gösterilir ?

Google ın webmaster lar için büyük bir kolaylık sağladığı google web fonts uygulamasını çoğu webmaster arkadaşımız duymuştur. Duymayanlar için bu büyük kolaylığı nasıl kullanmamız gerektiğini resimli olarak aktaracağım. Öncelikle;

Google web fonts nedir ?

Webmaster arkadaşlarımızın bildiği üzere web sitesi tasarımlarında kullanmamız gereken fontlar genelde işletim sisitemlerindeki ortak fontlar olmak zorundadır. (Tahoma, Arial, Time New Roman) gibi, Bunun nedeni de işletim sistelerinin ortak olarak kullanmadığı bir fontu web sitemizde kullanırsak, o yazı karakterini sadece bilgisayarında o font bulunanlar düzgün görüntüleyecektir. Olmayanlar işletim sisteminin atayacağı otomatik bir font görüntüler bu da web sitemizde çirkin bir görüntü olmasına sebep olabilir. Google bu sorunu ortadan kaldırmak için google web fonts uygulamasını duyurdu. Bu uygulama sayesinde 629 adet  font ailesini bilgisayarımıza indirmeden sadece küçük kod parçalarıyla web sitemize uyarlayabiliyoruz. Gelelim google web fonts uygulamasına / Kullanımına.

Google Web Font Kullanımı Resimli Anlatım.

Öncelikle BURADAN  Google web fonts anasayfasına bağlanın, Bağlandıktan sonra;

prewiew google web fonts

“Prewiews Text” kısmından Fontu hangi yazıda kullanmak istiyorsanız buraya yazarak yazının nasıl göründüğünü görebilir. yandaki size kısmından yazının büyüklüğünü ( punto ) ayarlayabilirsiniz. Soldaki blok ta da bazı ayarlamalar yapabiliyorsunuz. örneğin “filter” kısmından yazının incelik kalınlık ayarları, onun üstündeki “font ailesi” sayısını gösteren yazının altına aramak istediğiniz font ailesini yazabiliyorsunuz. “Script” kısmından ise yine alfabe seçeneklerini ayarlayabilirsiniz. Türkçe fontlar için “Latin Extended” Seçeneğini işretlemeniz gerekecek.

Prewiew tex alanına fontu kullanacağımız yazımızı yazdık, fontumuzu beğendik diyelim.

google fonts secilen

Font görünümünün altında “Quick-use” Butonuna tıklayın.  Açılan sayfada

1. Choose the styles you want:

Aşağıda göreceğiniz kısım yazının kalınlık ayarıdır,  Bu yazıda 400 width var sadece ama bazı yazılarda daha fazla seçenek oluyor. tıkladığınız zaman kod a bu eklenecektir.
web-font-kalin-ince

2. Choose the character sets you want:

Eğer 1. Kısımda gösterilen “Normal 400” işaretlediyseniz 2. kısım aktif oluyor (işaretlenmeyince de 3. kısıma geçiyorsunuz direk.) Burada yazının sınıfını seçebiliyorsunuz. “Latin ya da latin extended (latin-ext)”

yazi-sinifi-google-web-fonts

3.  Font Embeded :

Bu kısımda 3 adet sekme göreceksiniz,  Bunlar; Standart, İmport, Javascript. Şimdi Bunları Açıklayalım…

3-1. Standart

google web fonts standart

Bu kısımdaki Kodları  Websitemizin anasayfasında <head> tagları arasına ekleyip kullanacağız. Bu yöntem w3c standartlarına uymadığı için ve SEO açısından da sayfada fazla kod olarak algılanmasını ve yine seo açısından dışardan çağrılan url ler sevilmediği için tavsiye edilmiyor.

3-2. İmport

google web fonts import
Bu kısım tam olarak w3c standartlarına ve seo kriterlerine uymaktadır ve tavsiye edilen budur. Burada gördüğünüz kodu .css dosyanızın en tepesine ekliyorsunuz ve bu şekilde kullanıyorsunuz.

3-3. Javascript

google web fonts javascript
Buradaki Kodları kullanacaksanız şayet. harici bir js dosyasından çağırın. zira seo açısından html sayfanızdaki kod kirliliğini önlemiş olursunuz.

Bunları Tamamladıysanız Sıra geldi Fontumuzu sayfamıza taşımaya.

4. Integrate the fonts into your CSS:

Burada Fontumuz kullanıma hazırlanmıştır.

font-family: 'Wellfleet', cursive;

Fontumuza atayacağımız css dosyamızın font-family kısmını yukarda gördüğünüz gibi ayarlayın

aşağıda da Tüm h1 Taglarına uygulanmış örneğini görebilirsiniz

h1 { font-family: ‘Metrophobic’, Arial, serif; font-weight: 400; }

NOT: Önceki Makalemiz Olan “ Google Web Fonts’ta Bulunan Türkçe Fontlar ” Yazısında Türkçe Karakter Destekleyen Fonları Görebilirsiniz.

Mesaj 2 Comments

  1. mamo dedi ki:

    Ya ben böyle uğraşmaktansa direk wp’ye google web font eklentisini kurup uğraşmadan hallediyorum. 😀 ama yinede tercih insanların sonuçta.

  2. hacer dedi ki:

    güzel ve detaylı bir anlatım olmuş teşekkürler.

Leave A Reply