Ana SayfaWeb TasarımGoogle Fontlarını WOFF Formatında İndirerek Sunucuda Kullanmak

Google Fontlarını WOFF Formatında İndirerek Sunucuda Kullanmak

YouTube'ta Takip Et →

Site hızı optimizasyonu ve performans testlerinde daha yüksek sonuç alabilmek ya da başka nedenlerden dolayı Google yazı tiplerini kendi sunucunuzda barındırmak ve Google Fonts‘a bağlı kalmadan kullanmak mümkün. Bu fontları kendi sunucunuzda kullanacaksanız, bunun site performansına olumlu etki edip etmeyeceğini test etmek gerekir.

İhtiyacımız olan font dosyaları ve CSS kodları. Google Fonts web sitesinde bilgisayarımıza ttf olarak indirmemize olanak tanısa da, bu fontları web sayfamızda kullanmak için woff uzantılı dosyalara ihtiyacımız var. Elinizdeki ttf yazı tiplerini Font Squirell adresine yükleyerek Webfont haline getirebilirsiniz.

Benim size Google Fonts’ları indirmek için önerebileceğim site ise Google Webfonts Helper. Bu siteye girerek sol taraftan, indirmek istediğiniz fontu seçin. Ardından hangi kalınlıkta indirmek istediğinizi seçerek fontları indirin.

Google Fontları Sunucuya İndirerek Kullanmak

Fontları sunucunuza bir FTP programı ile yükleyip, doğru CSS yolunu verdiğinizde fontlar sayfanızda başarılı bir şekilde çalışacaktır.

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/lato-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Lato Regular'), local('Lato-Regular'),
       url('../fonts/lato-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/lato-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/lato-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/lato-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/lato-v15-latin-regular.svg#Lato') format('svg'); /* Legacy iOS */
}

Gözden kaçırdığım veya eklemek istediğiniz bir şey olursa yorum kısmına yazabilirsiniz.