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ı


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.


<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

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?


Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

3466

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
POPÜLER MAKALE
  • HTML RESME LİNK VERME
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML FORM OLUŞTURMA
  • HTML DİV ve SPAN NEDİR?
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML RESİM EKLEME
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.