28172 sujets

CSS et mise en forme, CSS3

Problème avec @font-face sur firefox

Bonjour,
J'ai ouvert ce sujet car j'ai un problème avec @font-face sur firefox. En utilisant une url relative pour les fonts tout ce passe bien, même sur IE. Mais lorsque j'ai voulu utiliser une url absolue pour la font ça ne marche plus sur Firefox. Je voudrais savoir pourquoi, et si possible, j'aimerais bien pouvoir trouver une solution car en fait, je souhaitais utiliser @font-face sur des forums pas hébergé par mes soins (comme forumactif)

voici le code que j'avais utilisé : 

  @font-face 
  {
  font-family: 'Aquiline Two';
  src: url('http://onthesea.niloo.fr/kadus/AquilineTwo.eot?') format('eot'), url('http://onthesea.niloo.fr/kadus/AquilineTwo.ttf') format('truetype');
  }
  
  .font 
  {
  font-family : "Aquiline Two", Helvetica, Arial, sans-serif;
  font-weight : normal;
  font-size: 2.5em; 
  font-style: italic;
  text-align: center;
  
  }


Merci d'avance
Oui ça marche partout en chemin relatif mais pas en absolu et c'est ce dont j'ai besoin car je voudrais être capable d'utiliser des fonts non standards à partir des fichiers se trouvant dans un autre domaine, mais ça ne marche pas.
Je confirme avec ce test

Je ne trouve pas grand chose pour l'instant sur le sujet... à suivre.

pour info:

Chrome 10.0.648.204 = OK
Opéra 11.01 = OK
Safari 5.0.4 = OK

Firefox 4 = NOK
IE9 = NOK


html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test fontface </title>
<link rel="stylesheet" media="screen" href="toto.css" />
</style>
</head>
<body>
<h1 class="muse">Test avec MuseoSlab500 en local</h1>
<h1 class="babas">Test avec bebasneue sur un autre site</h1>
</body>
</html>


css

@font-face {
    font-family: 'MuseoSlab500';
    src: url('font/Museo_Slab_500-webfont.eot');
    src: url('font/Museo_Slab_500-webfont.eot?iefix') format('eot'),
          url('font/Museo_Slab_500-webfont.woff') format('woff'),
          url('font/Museo_Slab_500-webfont.ttf') format('truetype'),
          url('font/Museo_Slab_500-webfont.svg#webfont8VbsAwew') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'babas';
    src: url('http://www.leistercash.com/font/bebasneue-webfont.eot');
    src: url('http://www.leistercash.com/font/bebasneue-webfont?iefix') format('eot'),
          url('http://www.leistercash.com/font/bebasneue-webfont.woff') format('woff'),
          url('http://www.leistercash.com/font/bebasneue-webfont.ttf') format('truetype'),
          url('http://www.leistercash.com/font/bebasneue-webfont.svg#webfont8VbsAwew') format('svg');
    font-weight: normal;
    font-style: normal;
}

.muse {font-family: "MuseoSlab500";}
.babas {font-family: "babas";}

Modifié par fufu (04 Apr 2011 - 08:57)
Bonjour !
J'ai acheté une font sur fontspring ce matin et dans la doc il y'a ça !

a écrit :
Fonts not loading in Firefox
The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)

Fonts not loading in IE9
IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.


Ca répond à ta question je pense.
Sujet clos
Aller à