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

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 Fonts Bilgisayara IndirmekGoogle 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 */
}

Popular Eğitimler

Hareketli Font Awesome İkonları

Font Awesome fontlarını kullanarak onlara hareket verebiliyoruz. Font Awesome’a hareket verirken JavaScript’in…

CSS Sprite Nasıl Yapılır?

İnternet standartlarının ve CSS’in gelişmesi, sağladığı kolaylıklar, programcılara özellikle hız ve düzen…

VS Code Live Server ve Live Server Web Extension

VS Code Live Server ile HTML ve CSS gibi statik sayfalarınızı, ister…

CSS Nth-Child Kullanımı

CSS’te nth-child komutu nasıl kullanılır? Nth-child komutu kullanarak ilk element, son element ya da aralardaki element dizileri nasıl seçilir?

WampServer Kurulumu ve Kullanımı

Bilgisayara yerel sunucu kurmak için server uygulamalarından faydalanırız ve bu uygulamalarla PHP…

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

Site hızı optimizasyonu ve performans testlerinde daha yüksek sonuç alabilmek ya da…