J'essaie de faire fonctionner la police Bebas Neue, j'ai réussi à convertir mes polices dans leurs types respectifs, mais chaque fois que je charge la police dans le navigateur, j'obtiens des erreurs.

Firebug lance:

Police téléchargeable: échec du téléchargement

Chrome lance un 404 introuvable.

Au départ, je les avais dans leur propre dossier de polices, mais j'ai ensuite décidé de déplacer les polices dans le même répertoire que la feuille de style que j'utilisais pour essayer d'éliminer les problèmes d'emplacement.

Ce fichier particulier est un partiel SASS appelé _typography qui vit dans un dossier appelé global, c'est le même dossier dans lequel j'ai directement placé toutes les polices telles quelles.

@font-face {
    font-family: 'BebasNeueRegular';
    src: url(BebasNeueRegular.eot);
    src: url(BebasNeueRegular.eot?#iefix) format('embedded-opentype'),
         url(BebasNeueRegular.woff) format('woff'),
         url(BebasNeueRegular.ttf) format('truetype'),
         url(BebasNeueRegular.svg) format('svg');

    font-weight: normal;
    font-style: normal;
}
0
Lewis Briffa 16 janv. 2017 à 17:50

2 réponses

Meilleure réponse

Assurez-vous que votre @font-face correspond à votre utilisation de font-family sur CSS, soit:

  • font-family: 'Bebas Neue'; sur tout ou:
  • font-family: 'BebasNeueRegular'; sur tout.

Comme:

@font-face {
    font-family: 'BebasNeueRegular';
    src: url(BebasNeueRegular.eot);
    src: url(BebasNeueRegular.eot?#iefix) format('embedded-opentype'),
         url(BebasNeueRegular.woff) format('woff'),
         url(BebasNeueRegular.ttf) format('truetype'),
         url(BebasNeueRegular.svg) format('svg');

    font-weight: normal;
    font-style: normal;
}

Correspond à l'utilisation du CSS:

.selector {
  font-family: 'BebasNeueRegular', sans-serif;
}

Ou:

@font-face {
        font-family: 'Bebas Neue';
        src: url(BebasNeueRegular.eot);
        src: url(BebasNeueRegular.eot?#iefix) format('embedded-opentype'),
             url(BebasNeueRegular.woff) format('woff'),
             url(BebasNeueRegular.ttf) format('truetype'),
             url(BebasNeueRegular.svg) format('svg');

        font-weight: normal;
        font-style: normal;
    }

Allumettes:

.selector {
  font-family: 'Bebas Neue', sans-serif;
}
0
Syden 16 janv. 2017 à 15:02

Avec une erreur 404 - ce sera 98% à cause du chemin erroné.

Juste une pensée - vous avez mentionné que vous les avez déplacés dans un partiel SASS? Ce dossier est-il accessible depuis le site? D'après mon expérience, votre SASS va se compiler dans une sorte de répertoire public.

Afin de dépanner ... théoriquement, vous devriez juste pouvoir ajouter www.yourdomaincom/path-to-font/font.eot et proposer un fichier à télécharger.

Si vous ne l'êtes pas, alors c'est vraiment un problème de chemin d'accès où se trouve l'erreur. En ce qui concerne les raisons pour lesquelles d'autres polices fonctionnent, je ne pourrais pas dire sans jeter un meilleur regard sur la configuration de votre projet.

Juste mes deux cents pour vous aider à résoudre les problèmes!

1
Ryan Green 16 janv. 2017 à 15:58