Utiliser plusieurs polices personnalisées à l'aide de @font-face ?

Question

Je suis sûr qu'il me manque quelque chose de très simple. J'ai utilisé une seule police personnalisée avec une police normale :

 @font-face {
    font-family: CustomFont;
    src: url('CustomFont.ttf');
}

Tout fonctionne bien lorsque je l'utilise, mais si je veux ajouter une autre police personnalisée, que dois-je faire ? J'ai essayé de séparer par une virgule la suivante ou d'ajouter une toute autre police, mais je n'arrive pas à faire fonctionner la deuxième police.

Answer 1

Vous ajoutez simplement une autre règle @font-face

 @font-face {
    font-family: CustomFont;
    src: url('CustomFont.ttf');
}

@font-face {
    font-family: CustomFont2;
    src: url('CustomFont2.ttf');
}

Si votre deuxième police ne fonctionne toujours pas, assurez-vous d'épeler correctement son nom de police et son nom de fichier, les caches de votre navigateur se comportent, votre système d'exploitation ne dérange pas avec une police du même nom, etc.

Answer 2

Découvrez fontsquirrel . Ils ont un générateur de polices Web, qui créera également une feuille de style adaptée à votre police (recherchez "@font-face kit"). Cette feuille de style peut être incluse dans la vôtre ou vous pouvez l'utiliser comme modèle.

Answer 3

J'utilise cette méthode dans mon fichier css

 @font-face {
  font-family: FontName1;
  src: url("fontname1.eot"); /* IE */
  src: local('FontName1'), url('fontname1.ttf') format('truetype'); /* others */
}
@font-face {
  font-family: FontName2;
  src: url("fontname1.eot"); /* IE */
  src: local('FontName2'), url('fontname2.ttf') format('truetype'); /* others */
}
@font-face {
  font-family: FontName3;
  src: url("fontname1.eot"); /* IE */
  src: local('FontName3'), url('fontname3.ttf') format('truetype'); /* others */
}