Posted By

stephcode on 10/17/10


Tagged

cufon


Versions (?)

Cufon


 / Published in: JavaScript
 

URL: http://cufon.shoqolate.com/generate/ http://github.com/sorccu/cufon/wiki/usage

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Playing with Cuf�³n</title>
  6. <!-- Stylesheets here, before all scripts. Helps avoid styling issues. -->
  7. <link rel="stylesheet" type="text/css" href="style.css" />
  8. <!--
  9. If you want to use complex selectors with Cuf�³n, load a selector engine (JavaScript framework) here.
  10. We support jQuery, Sizzle, MooTools, Dojo, Prototype and other popular frameworks.
  11. -->
  12. <script src="cufon-yui.js" type="text/javascript"></script>
  13. <script src="YourFont.font.js" type="text/javascript"></script>
  14. <script type="text/javascript">
  15. Cufon.replace('h1'); // Works without a selector engine
  16. Cufon.replace('#sub1'); // Requires a selector engine for IE 6-7, see above
  17. </script>
  18. </head>
  19. <body>
  20. <h1>Your custom font here</h1>
  21. <h2 id="sub1">Your custom font here too</h2>
  22. <!-- To avoid delays, initialize Cuf�³n before other scripts at the bottom -->
  23. <script type="text/javascript"> Cufon.now(); </script>
  24. <!-- Google Analytics and other scripts here -->
  25. </body>
  26. </html>
  27.  
  28.  
  29. And get: http://cufon.shoqolate.com/js/cufon-yui.js
  30.  
  31. And before the </body> tag, for IE:
  32.  
  33. <script type="text/javascript"> Cufon.now(); </script>
  34.  
  35. For my own reference:
  36.  
  37. Cufon.replace('h2', { fontFamily: 'Myriad Pro Regular' });
  38. Cufon.replace('h3', { fontFamily: 'Myriad Pro Semibold' });
  39. Cufon.replace('h4', {
  40. fontFamily: 'Myriad Pro Semibold',
  41. color: '#1584bd',
  42. hover: true,
  43. hover: {
  44. color: '#515151'
  45. }
  46. });
  47. Cufon.replace('.jcarousel-title', {
  48. fontFamily: 'Myriad Pro Semibold',
  49. color: '#1584bd',
  50. hover: true,
  51. hover: {
  52. color: '#515151'
  53. }
  54. });

Report this snippet  

You need to login to post a comment.