Safari font rendering issues

Question

As you can see below, the Texta-Light font in Chrome appears completely different with Safari. Chrome displays the font as I like but Safari's rendering on OS X and iOS looks too thin. The Safari image below is taken on iOS and as you can see for some reason the font appears as if there is two bits of text present.

I've looked for a solution but found nothing which works. I tried using -webkit-font-smoothing: subpixel-antialiased; but according to this question, the code isn't working anymore.

Chrome:

Chrome font-rendering

Safari on iOS:

Safari font-rendering

Here is the code for the images above:

h2 {
    font-family: 'Texta-Light', sans-serif;
    font-size: 3.5em;
    line-height: 1.2em;
}

Is there any solution to this?

if you are using a webfont, check which version (woff, svg, ttf) is actually applied. then try change the order of the `src()`s in the `@font-family` declaration — Wes, Jun 29 '15 at 02:02
Can you provide an [MCVE](http://stackoverflow.com/help/mcve)? A screenshot doesn't give us much to go on. — Alexander O'Mara, Jun 29 '15 at 02:04
That's not quite an MCVE. An example webpage with where we could inspect the text would be more useful. — Alexander O'Mara, Jun 29 '15 at 02:09
@AlexanderO'Mara I've added a website which shows the problem in Safari. — Pav Sidhu, Jun 29 '15 at 02:17
@RonaldUlyssesSwanson I'm not using any webfonts unfortunately, the font is an .otf — Pav Sidhu, Jun 29 '15 at 02:38
if you look closly in IOS font, its a font that has been overlayed by a font like it self. chrome also do those overlaying in fonts and use it for adding styles to the font such as "bold". the overlay font of the safari has some bugs I guess where the position or size of the original font and the overlayed font are not the same. — Genesis Mallari, Jun 29 '15 at 02:43
@GenesisMallari That sounds right, is there anything I can do to solve this, or am I stuck with it? This font issue really damages the consistent UI of the site — Pav Sidhu, Jun 29 '15 at 11:01
I'm using `@font-face { font-family: 'Texta-Light'; src: url('../fonts/Texta-Light.otf'); }` to import the font. I renamed it to .ttf but saw no change in appearance. — Pav Sidhu, Jun 30 '15 at 10:49
Please make sure all file type is included ie ttf,otf,woff,eot,svg,woff2 etc for browser supporting. — Rahul S, Jul 03 '15 at 04:59
Found another setting -webkit-font-feature-settings, which I've added to my answer though your site is down so its hard to test. — empedocle, Jul 06 '15 at 08:22

empedocle · Answer 1 · 2015-07-06T08:20:41.023

There is a CSS property, text-rendering, which in Safari is by default set to optimizeSpeed. What you want to change is:

text-rendering:optimizeLegibility;

enter image description here

From https://css-tricks.com/almanac/properties/t/text-rendering/

There are four possible values:

• auto (default) - The browser makes educated guesses about when to optimize for speed, legibility, and geometric precision while drawing text. Be aware that different browsers interpret this value differently.

• optimizeSpeed - The browser emphasizes rendering speed over legibility and geometric precision when drawing text. It disables kerning and ligatures.

• optimizeLegibility - The browser emphasizes legibility over rendering speed and geometric precision. This enables the use of special kerning and optional ligature information that may be contained in the font file for certain fonts.

• geometricPrecision - The browser emphasizes geometric precision over rendering speed and legibility. Certain aspects of fonts—such as kerning—don't scale linearly, so geometricPrecision can make text using those fonts look good. When SVG font is scaled, the browser calculates pixel size, then rounds to the nearest integer. The geometricPrecision property allows for more fluid scaling. Note: Only WebKit browsers apply this fluid value, Gecko treats the value just like optimizeLegibility.

There is an additional setting -webkit-font-feature-settings, of which one of them is kerning:

-webkit-font-feature-settings

h2 {
     -webkit-font-feature-settings: "kern" 1;
}

Can anybody confirm this works? It's not making a difference for me, on Safari 10.1.2 on Mac OS X 10.12.6 — Daniel, Aug 31 '17 at 18:33

Guy · Answer 2 · 2015-07-02T21:29:00.737

14

If, as per your comment, you are only serving .otf, you will need to serve the other file types too.

This could be causing an issue to do with iOs as until iOs 4.2, SVG was the only format to use custom fonts on the ipad or iphone.

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

A great tool to use is Font Squirrel's Webfont Generator

Edit: Also as mentioned in the comments the font-weight is set to bold by default and you are loading a light font.

edited Jul 02 '15 at 21:29

answered Jun 30 '15 at 16:36

Guy

10,931
5
36
47

I tried that today, though the issue still remains. – Pav Sidhu Jun 30 '15 at 17:29
Did you load the various files in that order? The link to the website in your question no longer works? – Guy Jun 30 '15 at 19:46
Yes I used that order, I used Font Squirrels Generator too. – Pav Sidhu Jun 30 '15 at 19:55
Any chance of updating that link to take a closer look? – Guy Jun 30 '15 at 19:55
Have you tried setting `font-weight: normal;` to your `@font-face`. The font could be rendering at different weights. Hard for me to test as I can't update your code to see on my iphone but I would suggest it as currently you are serving the 'light' font but the `h2` has browser styling of `bold` by default – Guy Jun 30 '15 at 20:12
@PavSidhu Any luck with this? – Guy Jul 01 '15 at 07:07
I got a problem with "ts" and "ps" with TTNorms font, using ttf and svg format it solves in iOS, thanks! – Miguel Ramirez Sep 04 '20 at 16:55
Wow theWebfont generator fixed most of my issues. I was using an very unusual font. Thanks for the kink! – schnickers Feb 09 '21 at 17:56

score 14 · Accepted Answer · answered May 21 '16 at 17:03

14

Safari has an issue with fonts. The easiest fix for the duplicate text issue is clarifying the font-weight:

font-weight: 400;

Using Lucho's Javascript's text stroke solution along with specifying font-weight will make your text the same as it is on Chrome.

answered May 21 '16 at 17:03

Pav Sidhu

6,724
18
55
110

This didn't work for me, I'm using the text stroke solution in CSS where I feel I have control over what browser it's displayed in. – brandito Feb 27 '18 at 01:13

score 10 · Answer 4 · edited Aug 06 '15 at 01:41

10

I found a post which uses JS to adjust the text-stroke property. Here is the actual code:

$(document).ready(function(){
    is_chrome = navigator.userAgent.indexOf('Chrome') > -1;
    is_explorer = navigator.userAgent.indexOf('MSIE') > -1;
    is_firefox = navigator.userAgent.indexOf('Firefox') > -1;
    is_safari = navigator.userAgent.indexOf("Safari") > -1;
    is_opera = navigator.userAgent.indexOf("Presto") > -1;
    is_mac = (navigator.userAgent.indexOf('Mac OS') != -1);
    is_windows = !is_mac;

    if (is_chrome && is_safari){
      is_safari=false;
    }

    if (is_safari || is_windows){
      $('body').css('-webkit-text-stroke', '0.5px');
    }


  });

You can modify the text-stroke of some other element. Hope it helps.

edited Aug 06 '15 at 01:41

Nathan Tuggy

2,237
27
30
38

answered Aug 05 '15 at 20:29

Lucho

1,024
1
15
24

@Ajean: Please be sure you're not just pattern-matching "I have the same problem" without checking for a solution, which this post includes. – Nathan Tuggy Aug 06 '15 at 01:40
@NathanTuggy You are correct, I didn't read this carefully enough when reviewing. Thanks for the double check! – Ajean Aug 06 '15 at 01:48
Fantastic answer! This seems to be the only solution which works well. – Pav Sidhu Aug 11 '15 at 22:43
Very interesting answer! Completely changes the look of sub-pixel fonts on Safari. – Garavani May 21 '16 at 08:53

score 5 · Answer 5 · answered Oct 29 '20 at 00:37

5

I had the same issue with font rendering on Safari, the browser couldn't cant find a bold version for the web font so it was trying to copy it which may vary in the bad rendering result.

You can try to disable it by adding: this CSS:

font-synthesis: none

Otherwise you can try setting the font-weight manually to one which is available ie.

font-weight: 400

answered Oct 29 '20 at 00:37

Josh

847
9
17

This was the answer for me. – Larry Williamson Aug 18 '23 at 17:30

score 4 · Answer 6 · answered Jul 05 '15 at 18:06

4

Try this:

html, body {
    text-rendering: optimizeLegibility;
}

or if like that it doesn't work,

html, body {
    text-rendering: geometricPrecision;
}

answered Jul 05 '15 at 18:06

ZwartyZ

308
1
9

I also saw no difference, I don't think this problem can be fixed at all. – Pav Sidhu Jul 05 '15 at 22:37
have you tried with another font? Something like Open Sans https://www.google.com/fonts#UsePlace:use/Collection:Open+Sans or Roboto etc... – ZwartyZ Jul 06 '15 at 09:03
Agree. Absolutely no difference (checked screenshot zooms) for me while using .woff fonts in Safari. Safari is the worst of browsers regarding sub pixel rendering. Inconsistent 'u’ or 'n’ renderings in different text lines even in well hinted fonts. – Garavani May 21 '16 at 08:58

artnikpro · Answer 7 · 2018-07-21T22:59:43.967

Based on @lucho's answer, I used same approach but I'm applying the fix as soon as <body> tag loads. This fixes the issue with too thin Open Sans font in iOS Safari.

<body>
<script>
  (function () {
    var ua = navigator.userAgent
    var isIOSSafari = /iPhone|iPad|iPod/.test(ua) && /AppleWebKit.*Safari\//i.test(ua) && ua.indexOf('Chrome') === -1
    if (isIOSSafari) {
      document.body.style.webkitTextStroke = '.5px'
    }
  })()
</script>

ALTERNATIVE APPROACH:

Alternatively you can add a class like ios-safari to <html> tag and then apply CSS to it normally:

  <script>
  (function () {
    const ua = navigator.userAgent
    const isIOSSafari = /iPhone|iPad|iPod/.test(ua) && /AppleWebKit.*Safari\//i.test(ua) && !ua.includes('Chrome')
    if (isIOSSafari) document.documentElement.classList.add('ios-safari')
  })()
  </script>
</head>

CSS:

.ios-safari {
  -webkit-text-stroke: .5px;
}

This worked for me, I just changed -webkit-text-stroke to -webkit-text-stroke-width since the prior setting requires a colour variable as well. Thanks! — Josh, Jun 05 '19 at 01:12

score 2 · Answer 8 · answered Mar 09 '20 at 02:36

2

Work for me!!!

.text{
       font-weight: unset;
       -webkit-text-stroke: thin;
}

Try it...!

answered Mar 09 '20 at 02:36

TaSvet

382
2
10

Worked for me as well. This, however, will affect the font rendering in Chrome, so it requires some logic (see @Lucho's answer). – jed Oct 23 '20 at 20:37

score 0 · Answer 9 · answered Apr 28 '21 at 22:07

0

A potential tested solution is to increase font-weight by a 100 iOS-wide, using a feature-query (assuming your default font weight is 400):

@supports (-webkit-touch-callout: none) {
  body {
    font-weight: 500;
  }
}

answered Apr 28 '21 at 22:07

Sbbs

1,610
3
22
34

score 0 · Answer 10 · answered Jun 02 '22 at 10:12

I used this approach, which kept he font on Chromium based browsers the same as before and changes only for safari browser.

$(document).ready(function(){
    if (navigator.userAgent.indexOf("Safari") == 125) {
        $('body').css('-webkit-text-stroke', 'thin');
    }
});

Safari font rendering issues

10 Answers10

Linked