Brief Font Revert During Browser Refresh

6 posts from 2 voices

• Started 2 years ago by Digishire
• Latest reply from Dude
• This topic is resolved

Tags:

No tags yet.

1. 

   Digishire
   Member

   I'm just getting settled into my new Habitat theme. I really enjoy the aesthetics of the design and look forward to using it over the long term.

   Thus far I've encountered one issue with the theme that I'm interested in finding a solution for. When clicking the "Home" button on my website, or when clicking the browser refresh button in Opera 10.63, FireFox 3.6.13, and Internet Explorer 8, the League Gothic font elements on my site briefly revert to an alternative font style. This font change process is quick and lasts maybe half a second before reverting back to League Gothic, however it creates "text bounce" that is tedious on the eyes after encounter it several times. The issue also gives off an aura of website instability.

   Is there a way that I can keep this brief font revert / text bounce from occurring?

   My fresh launched site:

   http://tinyurl.com/682k3tc

   Posted 2 years ago #
2. 

   Dude
   Dude

   Hey,
   it's a drawback of javascript/cufon font replacement. The browser needs to interpret/execute the code before the font displays right. When you refresh the page the browser executes the code again and replaces the standard font with the "designer" font again. You can't change this replacement behaviour...

   Posted 2 years ago #
3. 

   Digishire
   Member

   Thank you for the reply.

   Is it possible to replace the League Gothic font with a more standardized style (e.g. Veranda, Tahoma, etc.)? If I were to do that (assuming it's possible), would that then solve the brief font revert issue that I'm experiencing.

   Posted 2 years ago #
4. 

   Dude
   Dude

   Yes you can use standard web fonts but you need to remove cufon first. Open up header.php and remove following line:
   

   $k_option['custom']['styling']->set_cufon_font($applyCustomFontTo, $k_option['general']['font_heading']);

   Then open up style.css and search for following code:

   h1, h2, h3, h4, h5, h6, legend, .sliderheading {
   font-weight:normal;
   letter-spacing:0.4px;
   line-height:1.4em;
   padding:0px 1px;
   margin:0;
   position:relative;
   font-family: Tahoma, Tahoma, Helvetica;
   }

   Change the font family attribute to your requirements...

   Posted 2 years ago #
5. 

   Digishire
   Member

   Thank you so much for the info! I made the quick and easy change over.

   Posted 2 years ago #
6. 

   Dude
   Dude

   Glad that I could help you :)

   Posted 2 years ago #

RSS feed for this topic

Reply

You must log in to post.