Really Ugly Fonts in Chrome on Windows

Homepage › Community Forums › Epik Theme Support › Really Ugly Fonts in Chrome on Windows

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • September 10, 2013 at 3:57 pm #7300
    Solitude
    Customer

      In Firefox and IE Epik looks beautiful but I was shocked today when I saw it in Chrome. I tested it on both Windows 7 and 8 machines.

      After some searching I found this solution:
      http://www.adtrak.co.uk/blog/font-face-chrome-rendering/
      http://www.fontspring.com/blog/smoother-web-font-rendering-chrome

      Unfortunately I’m not sure how to implement it with Epik since

      //* Enqueue Lato Google font
add_action( 'wp_enqueue_scripts', 'genesis_sample_google_fonts' );
function genesis_sample_google_fonts() {
	wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Open+Sans:300,400,700', array(), PARENT_THEME_VERSION );
}<!--formatted--><!--formatted-->

      is a bit strange to me.

      I made it look a bit better though by adding

      -webkit-font-smoothing: antialiased !important;
	-webkit-text-stroke: 0.2pt !important;

      to the css file. It still doesn’t look right unfortunately but it does make it more readable.

      Does anyone know how to implement the svg fix to the font-face?

      Some more info: https://code.google.com/p/chromium/issues/detail?id=137692

      September 10, 2013 at 5:31 pm #7303
      dono2081
      Customer

        Hi Solitude … good job for you on finding a great solution to the problem. Here is what I recommend you try:

        First back up your website, making sure to pay extra special attention to backing up any of the files you are about to edit.

        Open your site in Chrome and take a screencap.

        Then, using a text editor like TextWrangler, or whatever you’re using, open functions.php in the Epik folder and add the patch you discovered. Make sure you know where you put this and even write a little note to yourself in a comment to remind you that you made this change.

        Save functions.php back to your server and give your site a look-see in Chrome. If you kept the previous window open, open another window and compare them side by side and see if you see an improvement.

        You don’t have to worry about adding the <!–formatted–> comments into your functions.php … they are html comments and afaik are not needed.

        Basically what this code is doing is adding a function to the list of things that run at a point called ‘wp_enqueue_scripts,’ which is when a bunch of scripts get run in WordPress. The function is defined in the next lines, and basically tells Genesis to use Google fonts.

        Hope that helps out. If it doesn’t work, then put back your saved functions.php file and everything’s back the way it was.
        -DonO

        September 11, 2013 at 12:48 am #7316
        Solitude
        Customer

          Thanks Dono, I will try it out later today and hope for the best. 馃檪

          September 11, 2013 at 3:14 pm #7336
          Solitude
          Customer

            Whew after a lot of struggle and trying out a lot of different things I just can’t get it right. The only time I get it to look good in Chrome is when it looks bad in Firefox.

            I will look at it again tomorrow but for now it looks like something that Chrome will just have to fix. Unfortunately it’s not that comfortable to read an Epik post in Chrome on Windows at the moment because the text is not that clear. So I’m wondering if a reader will stay for 1000 words if the text isn’t easy to read.

            Then again, I may be over analyzing things. Also, maybe Chrome users are used to bad fonts by now.

            September 11, 2013 at 4:48 pm #7339
            dono2081
            Customer

              Huh, curious. Do you want to share your site’s link so i can see what you’re talking about in Chrome?
              -D

              September 12, 2013 at 2:00 pm #7367
              Solitude
              Customer

                You can see it on the Epik demo when you go to a post. Especially if you compare the same post in Firefox or IE.

                The font looks jagged and thinner than what it’s supposed to be. I managed to get it to look less jagged with the SVG trick but the font was still too thin to read for a long period of time. In Firefox it’s nice and dark and there’s good contrast though. Even on my phone it looks great.

                In the end though I decided to live with the jaggedness since it’s not that bad but now I specifically say to use a font weight of 400 instead of 300 in the body when the browser is Chrome. It probably looks more pleasing to the eye with a font weight of 300 but it makes for easier reading with the higher font rate.

                http://demo.appfinite.com/epik/sample/sub-page-11/
                http://hostingweb.co.za/privacy-policy/

                I apologise for the state of my site. I’m still working on it. 馃檪 However you can compare the two pages in Chrome to see the difference. And see how it looks in Firefox (so pretty!).

              • Author
                Posts
              Viewing 6 posts - 1 through 6 (of 6 total)
              • You must be logged in to reply to this topic.