CDN Kurdum Fontlarım Görüntülenmiyor

Haziran 02, 2016 Uygulamada CDN

CDN Kurulumu tamamladıktan sonra bazı sitelerde fontlar ile ilgili sıkıntı yaşanabilmektedir. Bunun sebebi CSS dosyalarının font dosyalarını çağırırken relative (göreceli) olarak başka bir alanadından çağırmasından kaynaklı olmaktadır.

http://www.siteadim.com/css/stylesheet.css dosyasında font aşağıdaki şekilde çağırıldığını varsayalım.

@font-face {
    font-family: 'HelveticaRegular';
    src: url('helvetica-webfont.eot');
    src: url('helvetica-webfont.eot?#iefix') format('embedded-opentype'),
         url('helvetica-webfont.woff') format('woff'),
         url('helvetica-webfont.ttf') format('truetype'),
         url('helvetica-webfont.svg#HelveticaRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

CDN kurulu değilken bu css, font dosyasını
http://www.siteadim.com/css/helvetica-webfont.eot
adresinden çağırmaktadır.

CDN kurulduktan sonra css dosyası
http://cdn.siteadim.com/css/stylesheet.css adresinden yüklenecek, font dosyasını da
http://cdn.siteadim.com/css/helvetica-webfont.eot adresinden çağıracaktır.

Her iki durumda da açık olan sayfa http://www.siteadim.com/ olacaktır.

İlk senaryoda SAYFA + CSS + FONT aynı domain'den geliyor olmasına rağmen,
İkinci senaryoda SAYFA başka FONT başka domain'den geliyor olmaktadır.

Normal koşullarda bu bir sorun olmaması gerekirken zararlı yazılımları engellemek amacı ile güvenlik amacı ile çoğu modern tarayıcı tarafından başka alanadlarından çağırılan dosyalar engellenmektedir.

CDN Font Sorunu Çözümleri

1. CSS içerisinde fontları tam yolu ile çağırmak

CSS dosyasını açıp font dosyalarının çağırıldığı yerleri bulun

@font-face {
    font-family: 'HelveticaRegular';
    src: url('helvetica-webfont.eot');
}

Dosya yollarını aşağıdaki şekilde değiştirmeyi deneyin.

@font-face {
    font-family: 'HelveticaRegular';
    src: url('//www.siteadim.com/helvetica-webfont.eot');
}

2. Font yüklemesi yapan CSSleri ana alanadından çağırmak

Sitenizi CDN'e taşırken tüm statik içerikleri http://cdn.siteadim.com/ alanadından çağırırken sadece sorun çıkartan (dışarıdan font dosyası çağıran) CSS'leri ana alanadınızdan çağırmayı deneyin.

http://cdn.siteadim.com/css/stylesheet.css
yerine
http://www.siteadim.com/css/stylesheet.css

3. Ziyaretçilerinizin tarayıcılarına başka sitelerden font dosyaları yüklemelerini sağlamak

Sitenizin Hosting ayarlarını değiştirerek tüm tarayıcıların sitedeki CDN Fontlarını başka alanadlarından yükleyebilmesini sağlayabilirsiniz. Böylelikle CSS kodlarınızı değiştirmeye gerek kalmadan CDN yüklenmesi sonrasında oluşan font sorunu çözebilirsiniz.

Aşağıda Apache, NGINX, ve IIS 7 kullanarak bu değişikliğin nasıl yapılacağı gösterilmektedir.

APACHE

.htaccess dosyasının (tercihen en altına) aşağıdaki kodu ekleyin :

<FilesMatch "\.(ttf|otf|eot|woff|woff2)$"> 
	<IfModule mod_headers.c> 
	 Header set Access-Control-Allow-Origin "*" 
	</IfModule> 
</FilesMatch>

NGINX

location ~* \.(eot|ttf|woff|woff2)$ {
 add_header Access-Control-Allow-Origin "*";
}

IIS 7

<?xml version="1.0" encoding="utf-8"?> 
 <configuration> 
  <location path="media/css/font"> 
   <system.webServer> 
    <httpProtocol> 
	 <customHeaders> 
	  <add name="Access-Control-Allow-Origin" value="*" /> 
	  </customHeaders> 
	 </httpProtocol> 
	</system.webServer> 
   </location>
  </configuration>

Web Sunucusunda bu değişikliği uyguladıktan sonra CDN Hizmetinin Ön belleğinde yer alan dosyaların yenilenmesi gerekir.

CDN Hizmeti Paneline giriş yapıp ilgili CDN kaynağında Purge All işlemi gerçekleştirip bir kaç dakika beklenmesi gerekmektedir.