Mozilla Destek’te Ara

Destek dolandırıcılığından kaçının. Mozilla sizden asla bir telefon numarasını aramanızı, mesaj göndermenizi veya kişisel bilgilerinizi paylaşmanızı istemez. Şüpheli durumları “Kötüye kullanım bildir” seçeneğini kullanarak bildirebilirsiniz.

Daha Fazlasını Öğren

How to load a font using font-face and a CDN like Amazon S3?

  • 3 yanıt
  • 12 kişi bu sorunu yaşıyor
  • 1 gösterim
  • Son yanıtı yazan: cor-el

more options

Firefox cannot load the correct font when loading it from a CDN. Other browsers don´t have this problem.

My website: http://momardi.com

Platform: Linux server, with Apache, Wordpress 3.1 and W3 Total Cache plugin

My CDN: Amazon S3 with user read rights for the fonts

CSS font-face code:

@font-face {

 font-family: 'SansationRegular';
 src: url('http://momardi.s3.amazonaws.com/wp-content/themes/v1/fonts/Sansation_Regular-webfont.eot');
 src: local('SansationRegular'),
      url('fonts/Sansation_Regular-webfont.woff') format('woff'),
      url('http://momardi.s3.amazonaws.com/wp-content/themes/v1/fonts/Sansation_Regular-webfont.woff') format('woff'),
      url('http://momardi.s3.amazonaws.com/wp-content/themes/v1/fonts/Sansation_Regular-webfont.ttf') format('truetype'),
      url('http://momardi.s3.amazonaws.com/wp-content/themes/v1/fonts/Sansation_Regular-webfont.svg') format('svg'),
      url('fonts/Sansation_Regular-webfont.ttf') format('truetype'),
      url('fonts/Sansation_Regular-webfont.svg') format('svg');
      font-weight: normal;
      font-style: normal;

}

htaccess code:

<IfModule mod_headers.c> Header set Access-Control-Allow-Origin http://momardi.s3.amazonaws.com Header set Access-Control-Allow-Origin "*" </IfModule>

<FilesMatch "\.(ttf|otf|eot|svg|woff)$">

   <IfModule mod_headers.c>
       Header set Access-Control-Allow-Origin "*"
   </IfModule>

</FilesMatch>

Firefox cannot load the correct font when loading it from a CDN. Other browsers don´t have this problem. My website: http://momardi.com Platform: Linux server, with Apache, Wordpress 3.1 and W3 Total Cache plugin My CDN: Amazon S3 with user read rights for the fonts CSS font-face code: @font-face { font-family: 'SansationRegular'; src: url('http://momardi.s3.amazonaws.com/wp-content/themes/v1/fonts/Sansation_Regular-webfont.eot'); src: local('SansationRegular'), url('fonts/Sansation_Regular-webfont.woff') format('woff'), url('http://momardi.s3.amazonaws.com/wp-content/themes/v1/fonts/Sansation_Regular-webfont.woff') format('woff'), url('http://momardi.s3.amazonaws.com/wp-content/themes/v1/fonts/Sansation_Regular-webfont.ttf') format('truetype'), url('http://momardi.s3.amazonaws.com/wp-content/themes/v1/fonts/Sansation_Regular-webfont.svg') format('svg'), url('fonts/Sansation_Regular-webfont.ttf') format('truetype'), url('fonts/Sansation_Regular-webfont.svg') format('svg'); font-weight: normal; font-style: normal; } htaccess code: <IfModule mod_headers.c> Header set Access-Control-Allow-Origin http://momardi.s3.amazonaws.com Header set Access-Control-Allow-Origin "*" </IfModule> <FilesMatch "\.(ttf|otf|eot|svg|woff)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> </FilesMatch>

gazpachu tarafından tarihinde düzenlendi

Tüm Yanıtlar (3)

more options

Firefox downloads the font (I can see that with Live Http Headers), so that doesn't seem to be the problem. I don't know why Firefox isn't using it. If I download the font and change the font-family to Sansation then I see the font.

more options

I can also see Firefox downloads the fonts in the "net" tab of Firebug but I don´t know why is not using them :-(

more options

Try to ask advice at the mozillaZine Web Development/Standards Evangelism forum.
The helpers at that forum are more knowledgeable about web development issues.
You need to register at the mozillaZine forum site in order to post at that forum.

See http://forums.mozillazine.org/viewforum.php?f=25