1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Using Cufon fonts?

Discussion in 'Styling and Customization Questions' started by Raydianze, Mar 14, 2012.

  1. Raydianze

    Raydianze Member

    Might someone be able to teach me -- how to go about installing and using
    Cufon fonts? I'm trying to match things up with a website I'm developing that is using
    Cufons in header sections -- and would like to be able to do this too in Xenforo - with the
    <h1><h2>, etc - headers...
    Many thanks in advance... please be detailed with instructions - so I can follow it easily
    step-by-step... thank you!
     
  2. Forsaken

    Forsaken Well-Known Member

    https://github.com/sorccu/cufon/wiki/Usage

    If you still have questions I can help.
     
  3. Raydianze

    Raydianze Member

    Thanks Forsaken! even with that - you pointed out to me... I don't know where to begin -- where to add what!!!???
    HELP! need some step-by-step installation guidance!
     
  4. Forsaken

    Forsaken Well-Known Member

    I'd still suggest reading the guide, however you will be placing the following code in 'page_container_js_head':
    Code:
     <script src="cufon-yui.js" type="text/javascript"></script>
    <script src="YourFont.font.js" type="text/javascript"></script>
    <script type="text/javascript">
    Cufon.replace('h1'); // Works without a selector engine
    Cufon.replace('#sub1'); // Requires a selector engine for IE 6-7, see above
      </script>
    or this for multiple fonts:
    Code:
     <script src="cufon-yui.js" type="text/javascript"></script>
    <script src="Vegur_300.font.js" type="text/javascript"></script>
    <script src="Myriad_Pro_400.font.js" type="text/javascript"></script>
    <script type="text/javascript">
    Cufon.replace('h1', { fontFamily: 'Vegur' });
    Cufon.replace('h2', { fontFamily: 'Myriad Pro' });
      </script>
    You will need to change the 'YourFont.font.js' to whatever font you've generated, and the code in Cufon.replace(''); to the declarations you wish to style.

    You will also want to add the following code to 'page_container_js_body' before any other code:
    Code:
    <script type="text/javascript"> Cufon.now(); </script>
     
    Pro likes this.
  5. Raydianze

    Raydianze Member

    awww... thank's a zillion Forsaken -- that's what I was needing help with! I should be able to work my way through
    this now -- with the above help you've provided to me! Very sincerely appreciate the effort.!!!! sure do!
     
  6. Forsaken

    Forsaken Well-Known Member

    I also sent you a PM, but you should be able to handle the rest.
     

Share This Page