About design and nearby

How to Use Multiple Fonts powered by Cufón on the Same Page

Posted: May 12th, 2012 | Author: | Filed under: Tips and Tricks | Tags: , , | No Comments »

When I need to use any custom font at my design, my usual choice is Cufon javascript library. Once I was trying to implement 2 different cufon fonts on the same page. The solution is pretty easy, but you should know where to look for ))

  1. <script type="text/javascript">
  2.         $(document).ready(function () {      
  3.         Cufon.replace('.apercu_bold', { fontFamily: 'Apercu' });
  4.         Cufon.replace('.apercu_reg', { fontFamily: 'Apercu Light' });  
  5.         });  
  6. </script>

How do I know that my fontFamily are ‘Apercu’ and ‘Apercu Light’? I’ve generated 2 files for my fonts (apercu_700.font.js and apercu_light_300.font.js). Cufon is getting the registration information with the curve data for each font. So if you view the source, you find how your custom fonts are named – line 29 for me, Cufon.registerFont({“w”:213,”face”:{“font-family”:”Apercu”,…}});

Share Button

Check Related Posts:


Leave a Reply


  • × 3 = nine

Looking for a Freelance UX & UI designer for your project? I’m ready to jump onboard!

Let's discuss your project now