Font change between Staging & Live versions

[tatyana_kozh]

Hello Team

Please see my Staging version has changed it’s font appearance:

Effortless Bespoke Tailoring To Impress

vs the Live version

Effortless Bespoke Tailoring To Impress

I was about to publish my Staging site, but how do I realign the font? I have not done any manipulations to it. Why did it change?

Many thanks for your help!

[prakash_s]

Hello @tatyana_kozh,

Thanks for writing to us.

I checked your both staging and production sites it seems that both sites’ fonts are the same fonts. It might be the issue of browser cache at your end. I would suggest you please clear your browser cache and then check it again.

Thanks

[tatyana_kozh]

Hello Prakash,
thank you so much for taking the time to create a mini video for me!

It is interesting that the font on your browser looks very different altogether!

[prakash_s]

Hello @tatyana_kozh,

In case, if the issue still persists please let us know. It would be beast you could share a video or screenshot.

Thanks

[tatyana_kozh]

Please see the screenshot…I know the difference is very small, but I do prefer my Live site. How do I change the font in the Staging version to match the Live version?

[ruenel]

Hello I have taken a closer look at your sites and I found out that you are using the Classic Custom Headline element incorrectly. Please be advised that you cannot nest a <p> HTML tag inside any of the the <h > HTML tag.

The text area is intended to a plain text only. You are not suppose to use <p> tags.

• https://stackoverflow.com/a/38896042

This is one of the issue why the fonts are not rendering properly. You must make sure that your Text Contents are valid and correct. This can also contribute to your SEO of your site.

Best Regards.

[tatyana_kozh]

wow…thank you so much for raising such an important point!

So how do I best split the Headlines in separate lines?

I also removed the

from Headlines, but that didn’t have any effect of the Font. Its is still ever so slightly bolder than the one on my Live version… Please help…

[tristup]

Hi @tatyana_kozh,

Glad that we are able to help you. I would suggest you use multiple Classic Headline elements or you can use the Headline element where you can use the HTML tags and also use the sub-headline option.

Hope it helps.
Thanks

[tatyana_kozh]

Hello There

The font still looks quite different between Staging & Live…I really don’t like how the font has changed. I have not done anything for it to change.

Could you please kindly help me get to the bottom of why it changes its appearance without me seemingly doing anything.

I know it was looking just fine until I switched to the latest version of Wordpress…

[tristup]

Hi @tatyana_kozh,

I have checked your staging and live site and found that you have made the changes on your staging site with the Headline element whereas in the live site <p> tag is still used to show the output. I would suggest you change the live site with the Headline element and check if that resolves your problem.

Live Site:

Staging Site:

Thanks

[tatyana_kozh]

Hello there

Thank you for looking into the details. You see I really like the font in the LIve version. If I was to add back the < p > element to my headlines in Staging, the fonts are still different for some reason…

I would like the fonts in my Staging site to be the same as in the Live version, but something isn’t working…

I am so sorry for going with the same issue could you perhaps see if your colleagues might have an idea of why that is?

Many thanks for your support!

[tristup]

Hi @tatyana_kozh,

You can select the <p> as HTML tag of the Headline element and set the color and font as you want. Please remember that the <p> tag is only available with the Headline element not with the Classic Headline element which you are using.

Hope it helps.
Thanks

[tatyana_kozh]

Hello Tristup

I understand that functionality. It is NOT that I do not know how to adjust the font. I don’t understand why I am using exactly the same font settings between Staging & Live and yet Live version has a different font?? How do I align my staging website font with Live is the question? They have the same settings, but render differently

[tristup]

Hi @tatyana_kozh,

The font size depends on the tag you are using here, in the Live server the p tags are used under the <span> tag and it may affect the default font size. Whereas the Headline element us the h1 tag which has the default font size for that specific tag and that is why it is different than each other.

Thanks

[tatyana_kozh]

Tristup, thank you for your response.

Please use my landing page as an example.

Effortless Bespoke Tailoring To Impress

Effortless Bespoke Tailoring To Impress

My menu in the Live version is less bold than in Staging. The headlines between the two have the same ssettings. Yet my Live version looks less bold.

If you are not able to let me know why, could you please ask for help from one of your colleagues. I would greatly appreciate it.

Thank you

[ruenel]

Hello @tatyana_kozh,

I have compared your staging site and your live site side by side.

I noticed that in your live site, you have installed the 3rd party Set More Appointments plugin and the styling of this plugin is overriding some of the site styling. Please have this plugin installed in your staging site and compared both sites again.

Best Regards.

[tatyana_kozh]

Thank you so much :))

You were right. It was that plugin…

Is there a way to make the font look thinner than what it currently is? I already went for the lightest setting on the font thickness. Perhaps there is a way to force it to become even lighter?

[marc_a]

Hi @tatyana_kozh,

It will require some custom CSS to force the font to be lighter. Regretfully, providing custom CSS code is outside the scope of our theme support. You may seek 3rd party developers to help you with your problems or you can avail One where we can answer questions outside of the features of our theme.

Thank you for understanding.