Safari font rendering issues

Question

Safari font rendering issues

61.3k Views Asked by Pav Sidhu At 18 April 2025 at 01:27

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?

Original Q&A

There are 10 best solutions below

Sbbs On 28 April 2021 at 22:07

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;
  }
}

Grimclaw Draven On 02 June 2022 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');
    }
});

Lucho On 05 August 2015 at 20:29

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.

artnikpro On 21 July 2018 at 22:34

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;
}

TaSvet On 09 March 2020 at 02:36

Work for me!!!

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

Try it...!

Guy On 30 June 2015 at 16:36

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.

empedocle On 04 July 2015 at 07:55

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;
}

ZwartyZ On 05 July 2015 at 18:06

Try this:

html, body {
    text-rendering: optimizeLegibility;
}

or if like that it doesn't work,

html, body {
    text-rendering: geometricPrecision;
}

Josh On 29 October 2020 at 00:37

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

**Pav Sidhu** · Accepted Answer

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.

Safari font rendering issues

There are 10 best solutions below

Related Questions in CSS

Related Questions in GOOGLE-CHROME

Related Questions in FONTS

Related Questions in SAFARI

Related Questions in RENDERING

Trending Questions

Popular # Hahtags

Popular Questions