[Jonathan LParticipant]

H Guys,

I am designing a new site for a client. I am using Icon. The site is located at http://jabbragency.net/ns/cameron
When I view the site in Chrome the fonts are what they should be. I am using Google Font Balthazar. When I went to check it in Firefox the font is completely different and then I went to check it in Windows 10 (Preview Build) it is different again.

Also when I viewed in Win 10 (win 8.1 platform) the layout is completely different.

Please see below the screen shots. The first one is Chrome and how it should look.

This is the layout in Explorer – All 3 images should span the screen

I hope you can help with this please.

Cheers,

Jonathan

[Jonathan LParticipant]

This reply has been marked as private.

[RadModerator]

Hi Jonathan,

I don’t see any google font request from network logs on my end. Probably because of your cache.

Would you mind providing your admin login in private?

For the meantime, please clear your W3 Total cache pluging’s cache and purge minified files if possible. Then disable that plugin.

Thanks.

[Jonathan LParticipant]

This reply has been marked as private.

[Prasant RaiModerator]

Hello Jonathan,

Thanks for writing in.

To fix the font rendring issue kindly add this under Custom > CSS in the Customizer:

body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
font-family: "Balthazar", sans-serif;
}

Kindly use the following CSS code for background garident, you can add this under Custom > CSS in the Customizer.:

body {
    background-image: -webkit-gradient(   linear,   left top,   left bottom,   color-stop(0, #636363),   color-stop(1, #CEEEEC)  );  background-image: -o-linear-gradient(bottom, #636363 0%, #CEEEEC 100%);  background-image: -moz-linear-gradient(bottom, #636363 0%, #CEEEEC 100%);  background-image: -webkit-linear-gradient(bottom, #636363 0%, #CEEEEC 100%);  background-image: -ms-linear-gradient(bottom, #636363 0%, #CEEEEC 100%);  background-image: linear-gradient(to bottom, #636363 0%, #CEEEEC 100%);
}

Hope that helps.

[Jonathan LParticipant]

Hi,

Thank you but I still need your help please.

I have added the background but how do I get the rest of it to blend in so that it all looks like a gradient?

On each page at present I have the following css:

.page .hentry .entry-wrap:last-child {
  border-bottom: 0;
  background-color: #ceeeec;
}
.x-colophon.top {
  background-color: #ceeeec;
}
.x-colophon.bottom {
   background-color: #ceeeec;
}

Thanks again for your help.

Cheers,

Jonathan

[Jonathan LParticipant]

Also just to follow up.
I am still having layout issues in IE 11.0.10011.0. Please see the following:

http://prntscr.com/6uxoft

The font in the quote boxes again is different from Chrome.
http://prntscr.com/6uxptj

This is Chrome below. How it should look.
http://prntscr.com/6uxqcz

Thank you.

Jonathan

[RadModerator]

This reply has been marked as private.

[Jonathan LParticipant]

Hi Again,

That’s weird. I’m still seeing a different font on my end. I checked what you said and the settings are correct. Any ideas?

Basically my client wants the whole page gradient so, whether it is a transparent or the whole thing gradient, whichever is the easier and work the whole way through.

Thanks again.

Cheers,

Jonathan

[RadModerator]

Hi Jonathan,

Like this?

.site, .page .hentry .entry-wrap:last-child, .x-colophon.bottom {
background-color: transparent;
}

And for your font issue, could be that the font you’re seeing is installed at your machine (system fonts) and it’s being loaded? I really cant confirm these as you site looks good on my end. And I’m not sure where to start looking. Though, your site is really messy like at your screenshot on IE compatibility mode (IE8). That’s why I guessed that your IE is on compatibility mode too.

Thanks.

[Author]

Posts