web-dev-qa-db-fra.com

@ font-face ne fonctionne pas dans WordPress

J'ai une police que je veux utiliser avec mes liens. D'une certaine manière cela ne fonctionne pas.

@font-face {
      font-family: HelveticaNeueLight;
      src: local('fonts/HelveticaNeueLight.ttf');
   }

Mon chemin de police est: wp-content/themes/mytheme/fonts/HelveticaNeueLight.ttf, et je l'ai utilisé comme ceci:

.jplnav li a {
     font-family: HelveticaNeueLight;
   }

Navigateur: Chrome

Y at-il une sorte de code spécial nécessaire pour faire fonctionner @ font-face?

1
Jeremi Liwanag

Selon votre navigateur et votre plate-forme, vous devez spécifier la police dans différents formats.
Voir cet exemple:

@font-face {
  font-family: "LeagueGothic";
  src: url('../fonts/league_gothic-webfont.eot');
  src: url('../fonts/league_gothic-webfont.eot?#iefix') format('eot'),
       url('../fonts/league_gothic-webfont.ttf') format('truetype'),
       url('../fonts/league_gothic-webfont.woff') format('woff'),
       url('../fonts/league_gothic-webfont.eot#iefix') format('embedded-opentype'),
       url('../fonts/league_gothic-webfont.svg') format('svg');
  font-weight: "normal";
  font-style: "normal";
}

Si vous avez juste la police au format .ttf et que vous avez besoin des autres, vous pouvez utiliser le générateur WebFont de de FontSquirrel pour créer votre propre kit @ font-face.

1
Mark Davidson