I have a font I want to use with my links. Somehow it doesn't work.

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

My font path is: wp-content/themes/mytheme/fonts/HelveticaNeueLight.ttf, and I used it like this:

.jplnav li a {
     font-family: HelveticaNeueLight;

Browser: Chrome

Is there some kind of special code need to make @font-face work?

  • You need not to specify the local(). Just use it like: src: URL('fonts/HelveticaNeueLight.ttf'); If I'm not wrong, it will work for you. As per as I know specifying local() will lead the browser to your local hard drive.. in most of the cases it's used to specify the file into the C:\\Windows\Fonts. But for web a better option is using @font-face with webfont generator. – Mayeenul Islam Aug 17 '13 at 14:53

Depending on your browser and platform you need to specify the font in different formats.
See this example:

@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";

If you just have the font in .ttf format and need the others, you can use the FontSquirrel's WebFont Generator to create your own @font-face kit.

| improve this answer | |
  • Thanks, im using chrome, ttf should work with chrome right?? – Jeremi Liwanag Aug 17 '13 at 14:42
  • In my experience, generating webfont kit with .otf file, doesn't work with ease. But .ttf won't create problem for you. Mark pointed you to the right direction - just follow it. :) – Mayeenul Islam Aug 17 '13 at 14:47
  • Chrome on Ubuntu just specifying the ttf works. Are you sure your path is correct? If you are using chrome open the developer tools and reload the page it should say if it loads the file. Secondly have you checked the rule is actually being applied, have you tried apply the font-face to the body? – Mark Davidson Aug 17 '13 at 14:49
  • Im not sure if my file path is correct. could you check the question, my path is there... anyway, ill check via inspect element. – Jeremi Liwanag Aug 17 '13 at 14:54
  • Path is probably correct if you style.css is in the root of wp-content/themes/mytheme/ – Mark Davidson Aug 17 '13 at 15:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.