Search code examples
cssfont-face

Fonts are misaligned vertically when using @font-face


I'm using an @font-face CSS rule to use a custom font (Old Sans Black) on my page. However, the font comes out completely out of alignment vertically. It looks fine when I install the font locally instead of using @font-face.

The issue occurs in Firefox, Chrome, and IE (although it looks better in IE :| ). Here's a screenshot of what it looks like:

https://i.sstatic.net/HENGd.png

Any help is very much appreciated!


Solution

  • Yeah. I've seen a question recently that was basically the same. I used to use Font-Face and after having things like that happening I started using Cufon. I can't believe I used to think it was hard to use. Compared to font-face, the quality is so much better. You should check it out.

    Look at the difference:

    http://mesonprojekt.com/blog/cufon-vs-font-face-a-visual-comparision