Goran Front Page Font Is Too Fuzzy

• 

  jpelder · Member · May 8, 2015 at 10:30 am

  • Copy link
  • Add topic to favorites

  There appears to be shading on the font, by default, that makes the copy headlines on the home page look fuzzy against the header image. I have chosen an orange color (fitting with our logo). Is there any way to make the font sharper and clearer to read?
  Many thanks
  Jonathan

  The blog I need help with is: (visible only to logged in users)

• 

  micawbr · Member · May 8, 2015 at 11:02 am

  • Copy link

  If you have the Premium Plan, try adding this to your custom CSS to remove the shading on those headlines:

  .hero-image .hero {
      text-shadow: none;
  }

• 

  jpelder · Member · May 8, 2015 at 11:08 am

  • Copy link

  Micawbr, currently I have not needed to upgrade to the Premium Plan. So much is possible with the basic with Goran theme. I was hoping for a non-upgrade fix if at all possible?
  Thanks for the swift response.
  Jonathan

• 

  kathrynwp · Staff · May 8, 2015 at 2:08 pm

  • Copy link

  Hi Jonathan, it looks like you’re using heading tags on your front-page copy. It’s those h4 and h5 tags which have a text-shadow style on them by default. Here’s what your code currently looks like:

  <h4 style="text-align: left;"><strong><span style="color: #ff6600;">Achieving My Marketing Goals Was A Nightmare!</span></strong></h4>
  <h5 style="text-align: left;"><strong><span style="color: #ff6600;">With ELDER's full service inbound marketing approach</span></strong></h5>
  <h5 style="text-align: left;"><strong><span style="color: #ff6600;">and real world digital marketing experience, </span></strong></h5>
  <h5 style="text-align: left;"><strong><span style="color: #ff6600;">you increase your leads, customers and revenue</span></strong></h5>

  Instead of h4 and h5 tags, I’d suggest you instead use regular paragraphs. You also don’t need to define text-align: left on those.

  Here’s an example of how you could tweak your code to achieve a similar effect as what you have now, but without the text shadow.

  After

  <div style="color: #ff6600; font-weight: bold; font-size: 18px;">
  Achieving My Marketing Goals Was A Nightmare!
  
  With ELDER's full service inbound marketing approach
  
  and real world digital marketing experience,
  
  you increase your leads, customers and revenue
  </div>

• 

  jpelder · Member · May 8, 2015 at 2:18 pm

  • Copy link

  Kathryn, I have just placed your example code in and not sure it has made much difference?

  Jonathan

• 

  kathrynwp · Staff · May 8, 2015 at 2:21 pm

  • Copy link

  You’re right, sorry. ;-)

  The front-page style defines the text-shadow style so that lighter text is legible on a background image. You can remove it by adding the text-shadow: none; declaration that micawbr suggested to your div:

  <div style="color: #ff6600; font-weight: bold; font-size: 18px; text-shadow: none;">

• 

  jpelder · Member · May 8, 2015 at 2:31 pm

  • Copy link

  Kathryn, Micawbr – what a team! Result!

  I still cannot get over all this – Goran is in a different league to the most other themes and what was available a year ago to implement a wordpress.com business spec website for a non-developer like me!

  Many thanks

• 

  kathrynwp · Staff · May 8, 2015 at 2:34 pm

  • Copy link

  So glad to hear you’re happy with Goran, I’ve passed along your lovely compliments to its designer/developer, Thomas. :)

• 

  jpelder · Member · May 8, 2015 at 2:41 pm

  • Copy link

  I would be happy if he / you wanted to use my site as an advocate / example for Goran. I know that sometimes the theme developer needs to give case studies.

• 

  kathrynwp · Staff · May 8, 2015 at 2:55 pm

  • Copy link

  Thanks, Jonathan!