CODEWITHSUNDEEP
htmlcsssafari
Suneth Kalhara
Suneth Kalhara

Reputation: 1208

Safari shows larger font size than other broswers

I'm working on a website, on which fonts are much larger on Mac's Safari than on the other browsers,

The website is using the 'Open Sans' font from Google Fonts.

Example, this a CSS snippet for titles:

h2.protitlesnbm{
    color: #404040;
    font-size: 22px;
    text-transform: uppercase;
    float: none;
}

This shows up like below on Chrome, Firefox and IE:

Example showing the text in regular font size.

But on Mac's Safari, it is shown like this:

The same example on Safari, now the text is bold

Somehow, Safari seems to add 1px for all fonts.

Can anyone help me to fix this issue?

Upvotes: 8

Views: 4168

Answers (3)

Sandro Schaurer
Sandro Schaurer

Reputation: 417

May you just need to make sure the Font is the same Weight on all Browsers.

you could try something like

h2.protitles{
    color: #404040;
    font-size: 22px;
    text-transform: uppercase;
    float: none;
    font-weight: 400; /* This should be the normal font-weight in Chrome */
}

If its still not thin enough you can try to play around with the font-weight value.

May it Helps :)

Upvotes: 1

Da Mahdi03
Da Mahdi03

Reputation: 1608

You can always use JavaScript check if the browser is Safari, and if it is, just minimize the font sizes by 1px. I know that this is not a conventional way of doing things, but as long as it works:

var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) {
    return p.toString() === "[object SafariRemoteNotification]";
})(!window['safari'] || (typeof safari !== 'undefined' && safari.pushNotification));

This method was taken from Javascript - How To Detect Browsers And its explanation:

Safari: A unique naming pattern in its naming of constructors. This is the least durable method of all listed properties and guess what? In Safari 9.1.3 it was fixed. So we are checking against SafariRemoteNotification, which was introduced after version 7.1, to cover all Safaris from 3.0 and upwards.

In order to change font sizes, there is a deprecated method that could still work:

document.body.fontSize(-1);

If not, try CSS Relative Font Sizes:

document.body.style.fontSize = ""; //Either Enter Percentages (90%) or EM
//EM Will Automatically Change Font-Size According To Browser
//%-ages Will Change Values Through Math (110% of 16px)

Hope that helps!

Upvotes: 1

Chillie
Chillie

Reputation: 1026

You could try using 

-webkit-font-smoothing: subpixel-antialiased;

or 

-webkit-font-smoothing: antialiased;

Upvotes: 6

Related Questions