Search code examples
htmlcssmenucufon

Issues with cufon canvas size

I have got a test site test site on which i have used cufon to display font on the top navigation menu, it works fine , but if you navigate to blog section , the menu text is disturbed, I have spend hours to figure out with no success, any ideas how to get the menu fonts aligned on blog section like all the other pages.

Thanks

Solution

  • I recommend using @font-face instead of cufon.

    It works in virtually every browser (IE-Support from at least version 5.5 on, yay).

    For the lazy guys, Google has a vast variety of free-of-charge Webfonts here

    If you want something special, you have to use the font of your choice (if you have the copyright or use a free font), and convert it to the formats you need (there are tons of converters out on the web).

    After that you take a look for example at Paul Irish's Article about @font-face. And there you go.

    Effectively it's something like this:

    @font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('☺'),
    url("GraublauWeb.woff") format("woff"),
    url("GraublauWeb.otf") format("opentype"),
    url("GraublauWeb.svg#grablau") format("svg");
}