Customiser font weight forgotten for headers

I’m just about finished up with this site for a customer of mine:

http://lavanyaholistics.co.uk

and have soft launched, but there is one niggling little issue that is bugging me - font weights in the headers. I’ve got them all set to Light 300 in the customiser which looks beautiful in the preview you see in the customizer. Fonts are rendered smoothly in the light weight.

Once you come out of customizer everything reverts to the default weight and stops rendering nicely.

The font in question is Helvetica.

Any tips on how to resolve this?

Hey Joseph,

I can see on the page the font-weight on that header text is set to lighter. Do you mind sharing temp admin access to that site so we can take a look at what you’re seeing on the customizer? You can just post the details here using the private reply option below.

Ben

[Content Hidden]

Hey Joseph,

I compared the customizer and frontend views, they’re using the same font-size, family, and weight. I can hardly notice any difference at all. Do you mind sending a screenshot of what you’re seeing from your end? You can upload the image to imgur and paste the link here.

Ben

Hey Ben - here is the link.

http://imgur.com/XBypUYj

The difference is most noticeable on the header text, top right of the page ‘Ayurveda & Holistic Treatments’. See how it’s nice and thin on the view on the right, with smooth rendering.

As I said in my OP, more of a niggle than something that desperately needs fixing, but if there is something I can do to stop it happening I’d be glad.

Hey Joseph,

It doesn’t look that bad on my end, you can hardly tell the difference(I’m on Windows 7). I actually compared all inherited styles for both and they seem to be all the same. That’s a really weird one. I’ll have one of the guys check in on this as well and see if they have something to say.

Ben

Hey Joseph,

Out of curiosity, I took a look at the site whilst in the customizer and the live front end. For me, I don’t see any difference on Mac/Chrome. What browser and system are you using?

Best,
Billy

Hi Guys - I’m using Mac OS X Yosemite 10.10.3 and Safari 8.0.6

Hey Joseph,

Interesting, someone else reported a very small issue with using that version of Safari yesterday as well. Regardless, can I have you try updating to the latest version which is 9.0?

Best,
Billy

Hi Guys - I’ve updated (took the plunge with El Capitan) and still the same result. For interest I’ve compared in the following screenshot between Safari and Chrome. Everything matches up in Chrome on my system, but Safari result varies between customiser and non-customiser view.

Hey Joseph,

For the sake of a test, would you mind choosing a Google Font for that by chance? I wonder if a system font like Helvetica just renders differently in browsers like we’ve all seen throughout the years of web evolution browser to browser. Worth a try at this point!

Best,
Billy

To be honest I assumed you’d be right, but after testing with Open Sans the same thing happens in Safari. I haven’t changed the top header, but if you check out the ‘Our Treatments’ header you can see the non customiser view renders more thickly and with a different aliasing.

Hey Joseph,

I am thinking we’ll have to chalk this up to how different browsers render different fonts. I can see the difference now in the screenshot and it appears to be affecting any font from what I can tell which leads me to the above. I’ll play around a bit in my local environment as well to see if I can find anything noteworthy.

Best,
Billy