Font size in safari

Issue

I have a website which uses CSS for all of its styling. But font size in Safari appear so much small.

I tried :

• px
• vw
• calc(vw+0px)
• em

What is the issue? And how can it be solved?

Solution

Without knowing your font-family, I can't actually tell whether what is the reason for this. Here are some possibilities to this problem.

1. Some font formats aren't supported by Safari.
2. If you are using font-weight, sometimes there may be no font-weight: your-value; in your selected font-family provided and the output result may vary according to this. May be bold or not.

So you can try disabling it by adding font-synthesis: none in the text, providing the bold version of your font or changing your font to a Web Safe Font.

To learn more about font-synthesis, please visit MDN font-synthesis page

If your font format is OTF, TTF type file format, Safari browser version 3.1 to 11.1 doesn't supports it. But however Safari browser version 12 supports it.

For more information, please visit these pages.

Browser support details for fonts

If that wasn't your problem, then you can also try the below code as well.

html{
    font-size: 16px;
    -webkit-text-size-adjust: 16px;
    -ms-text-size-adjust: 16px;
}

Thanks and best regards!

Answered By - Vishal Kalansooriya