title: SIFR: How much is too much?
body: <p>First time poster here, using the "<code>sifr3-r436</code>" build.</p>
  
  <p>I am doing work on my company's website and decided it was time for us to start employing some SIFR technology. So far, I have been able to figure it out quite easily, with the exception of a question or two. Basically, I have two burning questions that I would like answered.</p>
  
  <p>1) How much SIFR is considered "ok"? Although I am only using SIFR for headlines, per the recommendations in the FAQ/Walk-through, I still have a substantial amount of text that I would like to convert to SIFR. Please view <a href="http://www.holidayvacations.net/test" rel="nofollow noreferrer">the website</a> to get an idea of how much SIFR I'm using (Rockwell font headlines and subheads). Is this too much?</p>
  
  <p>2) How do I control font color with SIFR? Obviously I know you can set it inside the '<code>sifr-config.js</code>' file. However, I have many different colored headlines that I would like to use.. I'm currently doing it this way:</p>
  
  <pre><code>sIFR.replace(rockwell, {
  selector: '.h3_sifr', css: '.sIFR-root { font-size: 18px; background-color: #a63f03; color: #bf7e04;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
  });
  sIFR.replace(rockwell, {
  selector: '.h3_sifr_green', css: '.sIFR-root { font-size: 18px; background-color: #FFFFFF; color: #597704;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
  });
  sIFR.replace(rockwell, {
  selector: '.h3_sifr_maroon', css: '.sIFR-root { font-size: 18px; background-color: #FFFFFF; color: #330000;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
  });
  sIFR.replace(rockwell, {
  selector: '.h3_sifr_blue', css: '.sIFR-root { font-size: 18px; background-color: #FFFFFF; color: #005995;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
  });
  sIFR.replace(rockwell, {
  selector: '.h3_sifr_cruise', css: '.sIFR-root { font-size: 18px; background-color: #FFFFFF; color: #016EA1;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
  });
  sIFR.replace(rockwell, {
  selector: '.h3_sifr_australia', css: '.sIFR-root { font-size: 18px; background-color: #FFFFFF; color: #277c5d;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
  });
  sIFR.replace(rockwell, {
  selector: '.h3_sifr_intl', css: '.sIFR-root { font-size: 18px; background-color: #FFFFFF; color: #1b2f15;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
  });
  sIFR.replace(rockwell, {
  selector: '.h3_sifr_us', css: '.sIFR-root { font-size: 18px; background-color: #FFFFFF; color: #32588b;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
  });
  sIFR.replace(rockwell, {
  selector: '.h3_sifr_hawaii', css: '.sIFR-root { font-size: 18px; background-color: #FFFFFF; color: #4a1e52;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
  });
  sIFR.replace(rockwell, {
  selector: '.h3_sifr_rail', css: '.sIFR-root { font-size: 18px; background-color: #FFFFFF; color: #304c2a;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
  });
  sIFR.replace(rockwell, {
  selector: '.h3_sifr_canada', css: '.sIFR-root { font-size: 18px; background-color: #FFFFFF; color: #0a2754;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
  });
  sIFR.replace(rockwell, {
  selector: '.h3_sifr_alaska', css: '.sIFR-root { font-size: 18px; background-color: #FFFFFF; color: #083c4b;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
  });
  sIFR.replace(rockwell, {
  selector: '.h3_sifr_sadc', css: '.sIFR-root { font-size: 18px; background-color: #FFFFFF; color: #630002;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
  });
  sIFR.replace(rockwell, {
  selector: '.h3_sifr_easternus', css: '.sIFR-root { font-size: 18px; background-color: #FFFFFF; color: #8b3100;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
  });
  sIFR.replace(rockwell, {
  selector: '.h3_sifr_lightgray', css: '.sIFR-root { font-size: 18px; background-color: #FFFFFF; color: #999999;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
  });
  sIFR.replace(rockwell, {
  selector: '.h3_sifr_medgray', css: '.sIFR-root { font-size: 18px; background-color: #FFFFFF; color: #666666;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
  });
  sIFR.replace(rockwell, {
  selector: '.h3_sifr_darkgray', css: '.sIFR-root { font-size: 18px; background-color: #FFFFFF; color: #333333;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
  });
  sIFR.replace(rockwell, {
  selector: '.h3_sifr_extended', css: '.sIFR-root { font-size: 18px; background-color: #FFFFFF; color: #175700;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
  });
  sIFR.replace(rockwell, {
  selector: '.h3_sifr_orange', css: '.sIFR-root { font-size: 18px; background-color: #FFFFFF; color: #a63f03;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
  });
  </code></pre>
  
  <p>Now, as you can see, the only way I have been able to do the different colors is through a separate replace statement for each and every color. I tried changing the color 'inline' (i.e., <code>&lt;span class="h3_sifr" style="color:#123456&gt;&lt;/span&gt;</code>), but this does not work. Any tips?</p>