0

I have the following page loaded in a test environment.

To start, the fonts are properly licensed and have been downloaded from myfonts.com and declared as follows:

@font-face {font-family: 'HelveticaNeueLT';src: url('css/webfonts/3019F7_2_0.eot');src: url('css/webfonts/3019F7_2_0.eot?#iefix') format('embedded-opentype'),url('css/webfonts/3019F7_2_0.woff2') format('woff2'),url('css/webfonts/3019F7_2_0.woff') format('woff'),url('css/webfonts/3019F7_2_0.ttf') format('truetype');}
@font-face {font-family: 'HelveticaNeueLT-Bold';src: url('css/webfonts/3019F7_1_0.eot');src: url('css/webfonts/3019F7_1_0.eot?#iefix') format('embedded-opentype'),url('css/webfonts/3019F7_1_0.woff2') format('woff2'),url('css/webfonts/3019F7_1_0.woff') format('woff'),url('css/webfonts/3019F7_1_0.ttf') format('truetype');}
@font-face {font-family: 'HelveticaNeueLT-Light';src: url('css/webfonts/3019F7_3_0.eot');src: url('css/webfonts/3019F7_3_0.eot?#iefix') format('embedded-opentype'),url('css/webfonts/3019F7_3_0.woff2') format('woff2'),url('css/webfonts/3019F7_3_0.woff') format('woff'),url('css/webfonts/3019F7_3_0.ttf') format('truetype');}

If you look at the page in Chrome for PC (v47), you will see that the text is highly pixellated, most evident in the Contact Us button. In Chrome for Mac, the button is crystal clear. As a rough estimate, this is 30% because the Chrome for Mac rendering engine rendered the page more clearly and 70% because I added the following code to the CSS rule for the button:

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing:grayscale;

Does anyone have any thoughts as to what is going on here? You can check out the stylesheet to see if anything there helps troubleshoot the issue.

zgall1
  • 2,865
  • 5
  • 23
  • 39
  • Maybe this topic can help you out, especially the second answer: http://stackoverflow.com/questions/9272073/why-are-my-google-web-fonts-pixelated – Stefan Neuenschwander Jan 20 '16 at 15:55
  • @StefanNeuenschwander I checked the link and implemented the solution suggested in the second answer. Unfortunately, it did not solve the problem as I am still seeing the same levels of pixellation. I am a novice developer so if you could check my stylesheet to see if the suggested fix was properly implemented, that would be great. – zgall1 Jan 20 '16 at 16:25
  • tip from 2016: stop using all the unnecessary formats, they've not been needed for a few years now; everything supports WOFF. You can ditch EOT because Microsoft has abandoned all the IE versions that don't do WOFF, you can ditch SVG because it was abandoned as a font format by *everyone* years ago, you can ditch the TTF/OTF originals because WOFF is a byte-for-byte wrapper of them (but with lossless compression). So: just use WOFF, simplify your life. And your site payload. It also means only one source of rendering quirks to debug. – Mike 'Pomax' Kamermans Jan 20 '16 at 17:02
  • @Mike'Pomax'Kamermans I updated the CSS to use WOFF2 and WOFF only but the problem remains. I'm pretty sure there is a bug in Chrome that specifically relates to Helvetica Neue. I can find the odd post through Google where people bring up the same issue. – zgall1 Jan 20 '16 at 19:57

1 Answers1

1

Not and expert but fiddling with inspector I notice two things

  1. http://184.106.89.208/wp-content/themes/blueprint2016/font/stylesheet.css Failed to load resource: the server responded with a status of 404 (Not Found)

  2. You are forcing 16px on the font and somehow that is pretty bad on your font. If I remove the 16px from .live_more_btn a then it looks acceptable.

AlienRancher
  • 639
  • 4
  • 14