Font weight different on different devices and browsers

Support
#1

Hi, the text on my header shows up with different font-weight depending on browser.
In chrome and safari it seems to reflect fine but in firefox and on safari mobile its a heavier font-weight.

I’ve tried adding the weight as CSS, but that does not seem to make any difference.

Firefox

Safari

Safari Mobile

Please advice.

URL: www.anderswasser.com

#2

tried to look but you have an under construction page…

#3

Hi there,

This is a matter of the -webkit-font-smoothing CSS property which is rendered differently in Chrome and Safari.

Please kindly try the options below and see which one suits your needs (X > Launch > Options > CSS):

.x-text>span {
    -webkit-font-smoothing: antialiased;
}

or

.x-text>span {
    -webkit-font-smoothing: subpixel-antialiased;
}

or

.x-text>span {
    -webkit-font-smoothing: none;
}

Hope it helps.

#4

Sorry, no luck unfortunately on safari on iOS.
“None” just rendered it very pixeled.

Any other ideas?

#5

Hello There,

Thanks for updating in and for sending us the screenshots. What font are your using by the way? I could see that you use font-family: inherit; and this will inherit the property of the parent element. Please try to set a font family and see if there is any difference.

I also check out your css and I see an invalid entry:

h1,.h1{
  font-family:inherit !important;
  font-weight:300; !important;
  letter-spacing:0.25em;
}

The correct one should be:

```css
h1,.h1{
  font-family: inherit !important;
  font-weight: 300 !important;
  letter-spacing: 0.25em;
}

Please let us know how it goes.