1

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?

1
  • 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. Commented Aug 17, 2013 at 14:53

1 Answer 1

2

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.

5
  • Thanks, im using chrome, ttf should work with chrome right?? Commented Aug 17, 2013 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. :) Commented Aug 17, 2013 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? Commented Aug 17, 2013 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. Commented Aug 17, 2013 at 14:54
  • Path is probably correct if you style.css is in the root of wp-content/themes/mytheme/ Commented Aug 17, 2013 at 15:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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