@font-face kits available?

6 posts from 2 voices

• Started 1 year ago by davestewart
• Latest reply from Dude
• This topic is not a support question

Tags:

• fonts cufon @font-face

1. 

   davestewart
   Member

   It turns out one of my users is getting anti-aliasing issues with Cufon (he has his browser scaled to 135%, and it makes Cufon go surprisingly jaggy) so I'm going to switch my theme to @font-face which offers other advantages as well, like real links.

   Anyway, it shouldn't be too much of an effort for just one font, but for all the fonts might take an hour or so.

   So, I wonder, have you already done this, or is there a patch available for the theme?

   Cheers,
   Dave

   Posted 1 year ago #
2. 

   Dude
   Dude

   Hey,
   at the moment Kriesis themes do not support the google font api or font face out of the box. If you just want to implement one font I'd deactivate cufon and paste the necessary css font face code in css/custom.css. If you want to implement more fonts you need to rewrite broadscope\framework\php\class-style-generator.php a bit. You can also use font face and cufon in combination. If the browser doesn't support font face cufon will be loaded and used instead. It works great for me and I used: http://www.modernizr.com/ for it.

   Posted 1 year ago #
3. 

   davestewart
   Member

   OK, thanks for the info; I'll check it out :)

   Posted 1 year ago #
4. 

   Dude
   Dude

   Hope you'll find a solution :)

   Posted 1 year ago #
5. 

   davestewart
   Member

   OK, this was really simple to implement, thanks Dude.

   1. Download the @font-face kits from Google, and store them in "broadscope/framework/fonts/". The folder name will need to be the same as the key used by the PHP cufon code. In the case of Droid Sans, it was "droidsans"

   2. Update your "broadscope/framework/php/class-style-generator.php" file:
   

   function cufon($rule)
   {
   	$this->extra_output .= "\n<!-- @font-face stylesheets -->\n";
   	$this->extra_output .= "<link href='" .AVIA_FW_URL. "fonts/" .$rule['value']. "/stylesheet.css' rel='stylesheet' type='text/css' />\n";
   }

   3. Edit your "custom.css" file:

   .content h1, .content h2, .content h3, .content h4, .content h5, .content h6{
   	font-family:DroidSansRegular;
   	font-weight:normal;
   	}

   As it happens, I actually prefer the Cufon rendering (I'm on Windows) but I prefer the flexibility of native @font-face fonts.

   Cheers,
   Dave

   Posted 1 year ago #
6. 

   Dude
   Dude

   Thanks for the code snippets :)

   Posted 1 year ago #

RSS feed for this topic

Reply

You must log in to post.