CSS GOOGLE FONTS KULLANIMI

Google fonts ile yaptığımız siteler içerisinde özel font kullanarak içeriklerimizi görsel açıdan zenginleştirebiliriz. Sistemde yüklü olmayan fontlar google font api'nin avantajları ile ziyaretçinin bilgisayarına indirilip kullanma imkanı verir.

Websitesi tasarlarken fontların okunabilir olması ve yazıların düzenli görünmesi önemli konulardan biridir. Çok iyi bir şekilde tasarlanmış görsel bir sitenin yazılarının zor okunduğu bir proje başarıya ulaşamamış bir projedir. Bu yüzden her geçen gün Typografi ye daha da önem verilmeye başlanmıştır.

Herkesin kullanımına açık olan Google Fonts içerisinde birçok farklı dilde (135 dil) destek sunan fontları barındırmaktadır. Google Web Fonts arşivi içerisinde sunulan tüm fontlar Google'ın kendi sunucuları depolanan belirli bir yazı tipi ile bağlanarak (bant genişliği tasarrufu + önbellekleme avantajları) artık çok çeşitli özel yazı tiplerine erişebiliyoruz . Tam anlamıyla, bu fontları yaklaşık 20 saniye içinde projenize entegre edebilirsiniz. Bu kadar basit. Ayrıca, sahne arkasında gerçekleştirilen işlemler nedeniyle, bu özel fontlar Tarayıcılar arası farklılık göstermeyen, farklı tarayıcıların da desteklediği Google Font API, kolay kullanımı yüzünden de tercih sebebidir.

Google fonts Açık kaynak

Google fonts kataloğundaki tüm yazı tipleri ücretsiz ve açık kaynaktır ve her projeye herkes tarafından erişilebilir bir yapıya sahiptir. Bu, sık kullanılanlarınızı paylaşabilir ve arkadaşlarınız ve iş arkadaşlarınızla kolayca işbirliği yapabileceğiniz anlamına gelir. Google Fonts, tüm lisans ve barındırma işlemlerini yerine getirir; böylece herhangi bir fontun en yeni ve en kapsamlı sürümünün herkese açık olmasını sağlar.

Google fonts hızı

Google Fontlar Api tarafından üretilen kodu kullanarak, sunucularımız tarayıcısının desteklediği teknolojilere göre mümkün olan en küçük dosyayı otomatik olarak her kullanıcıya gönderir. Örneğin, varsa WOFF 2.0 sıkıştırmasını kullanır. Bu, tüm kullanıcılara, özellikle bant genişliği ve bağlantının sorun olduğu alanlarda, web'i daha hızlı hale getirir. Artık herkes, nerede olursa olsun, ürün ve web sayfalarında aynı kalite ve tasarım bütünlüğünün tadını çıkarabilir.

Google Font API’nin Avantajları

• Bant Genişliği:Google, font dosyalarını kendi sunucusunda yükleme yaparak, böylece bant genişliği tasarrufu sağlıyor.
• Tarayıcı :Çoğu tarayıcıda çalışır. (Explorer 6 versiyonu desteklemekte)
• Yükleme Hızı :@font-face’le eklenen fontların tarayıcıda yüklenmesi zaman alıyor. Google sunucuları ile hızlı yüklenir.
• Yazı Tipi :Yüksek kaliteli açık kaynak yazı tipi seçenekleri.
• Kullanımı :Son derece kolay kullanılır.
• Önbellek :Web üzerindeki siteler aynı fontu bulundurması tarayıcı önbelleğe alarak burdan kullanması siteye hız katar.

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

Google fonts adresini ziyaret ettiğimizde en fazla kullanılan fontlar listelenmiş bir şekilde karşımıza çıkıyor. google font'un arşivi her geçen gün büyümektedir.

Google fonts Kapsamlı kataloğu kullanarak, nerede olursanız olun, tipografiyi herhangi bir tasarım projesine sorunsuz bir şekilde paylaşıp entegre edebilirsiniz.

Google Fontları içerisinde Türkçe dilini destekleyen veya desteklemeyen birçok font bulunuyor. Türkçe karakter sorunuyla karşılaşmamak için yapacağınız en basit şey Google Fonts üzerinden font araması yaparken sağ kısımda yer alan Languages bölmünden Latin Extended'i seçmek. Bu filtre ile aradığınız fontlar genelde Türkçe karakter sorunu yaşatmayacaktır.

Google font kataloğundan beğendiğiniz font bölümüne geldiğinizde üste seçebileceğimiz yeni bölümler gelir. Burdan fontun cümle, paragraf, başlık, alfabe ve rakam olarak nasıl göründüğüne bakabiliriz. Fontun kalınlıklarınıda (regular 400, bold 700) ayarlayarak ve font-size değerini değiştirerek fontun nasıl göründüğüne bakabiliriz.

Seçtiğimiz font bölümünde sağda üste "+" buton gözükmekte bu butona tıklayarak alt bölümde menü açılacak üzerine gelip mouse ile tıklayın.

Açılan menü

Alt bölümde açılan kutunun görünümü

Açılan sayfada "EMBED" bölümünde web sayfamızın head bölmüne ekleyeceğimiz link etiketi bulunmakta.

Css'de nasıl kullanacağımızın bir örneğini vermiş

font-family: 'Roboto', sans-serif;

customize bölümünde fontumuzun style özelliklerini ayarlayabiliriz. bu bölümde fazla özellik şecersek yavaş yükleneceğini sağda üste butonda gösterir (hızlı:yeşil renk, orta:sarı renk, yavaş:kırmızı renk).

Hangi tarayıcılar destekliyor?

• Google Chrome: sürüm 4.249.4+
• Mozilla Firefox: sürüm: 3.5+
• Apple Safari: sürüm 3.1+
• Opera: sürüm 10.5+
• Microsoft Internet Explorer: sürüm 6+
• Android 2.2+
• iOS 4.2+ (iPhone, iPad, iPod)