CODEWITHSUNDEEP
javascriptcssfontssafarisupersized
Leo Stein
Leo Stein

Reputation: 157

Font issue on Safari

I have an issue with the font on Safari on this website . If you click on the icon on the top right of the screen you'll see that the font in the dropdown menu looks weird (thin and blurry).

I think that the issue is caused by the Supersized JS plugin. If you look on another page where the Supersized plugin is not called , the menu looks fine.

Also see here: you can see that issue is occuring only when the first slide is loaded. Weird!

Someone knows what is causing this?

Thanks.

Upvotes: 2

Views: 3571

Answers (3)

Antony
Antony

Reputation: 15106

Safari on Mac

This problem occurs because you have a visible position:fixed element on the page, and Safari would change the font smoothing to antialiased, making the text look thin and blurry.

Exhibit 1

Visible position:fixed element causing text to look thin.

Exhibit 2

Hide the element and the text become normal again.

To fix this, you should state the font smoothing explicitly as follows:

body {
    -webkit-font-smoothing: subpixel-antialiased;
}

Exhibit 3

Applying the fix and the issue is gone.

For more information on how position:fixed affects -webkit-font-smoothing, see my answer to another question.

Safari on iOS

On iOS devices however, Safari would blindly apply antialiased to text even when -webkit-font-smoothing is set to be subpixel-antialiased and there are no visible position:fixed elements on the page. To correct for this, you can use -webkit-text-stroke to approximate the looks of the text.

-webkit-text-stroke: 0.5px;

Exhibit 4

Thin and blurry text on iPad.

Exhibit 5

Use -webkit-text-stroke to simulate the original looks of the text.

Upvotes: 11

Eldwin Eldwin
Eldwin Eldwin

Reputation: 1094

The easiest way to solve this is changing the font to any web font. Your "v_helv" font is not well supported on safari / chrome. There are a lot of free cross compatible browser font on Fontsquirrel

Otherwise, you can change the font type if the web page is openned on web kit browser type by using this code:

@media all -webkit-device-pixel-ratio {
    body{
        font-family: "HelveticaNeue-Light" !important;
        font-weight: 200
    }
}
@media not -webkit-device-pixel-ratio {
    body{font-family: "HelveticaNeue-UltraLight" !important;}
}

Upvotes: 0

Aaroniker
Aaroniker

Reputation: 190

Try to add:

-webkit-font-smoothing: antialiased;

Upvotes: 0

Related Questions