Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>The problem is that IOS provides partial support for font-feature-settings CSS property but you can use ligatures in iOS Safari adding <code>text-rendering: optimizeLegibility</code>. The following link (<a href="http://clagnut.com/sandbox/opentype/ligatures" rel="nofollow noreferrer">http://clagnut.com/sandbox/opentype/ligatures</a>) shows a text using the font Magenta with Common &amp; Discretionary Ligatures ON and other text with Common &amp; Discretionary Ligatures OFF. </p> <p>If you access this link from an iOS device you will see that both texts are equal. This means that iOS does not support ligatures only with <code>font-feature-settings</code> and that is why the gyphs in your typography do not work on iOS.</p> <p>To make it work in iOS, you'll have to add <code>text-rendering: optimizeLegibility</code> to your css. A good reference may be <a href="http://elliotjaystocks.com/blog/the-fine-flourish-of-the-ligature/" rel="nofollow noreferrer">"Tomorrow’s web type today: The fine flourish of the ligature"</a>. But, you should read <a href="https://stackoverflow.com/questions/7968795/is-it-safe-to-use-the-css-rule-text-rendering-optimizelegibility-on-all-text">"Is it safe to use the CSS rule “text-rendering: optimizelegibility;” on all text?"</a>.</p> <p>You will find an example of your font working in iOS in the following link:</p> <p><a href="http://jsfiddle.net/poselab/TQjgC/" rel="nofollow noreferrer">http://jsfiddle.net/poselab/TQjgC/</a></p> <pre class="lang-css prettyprint-override"><code>text-rendering: optimizeLegibility; </code></pre> <p>A screenshot of this jsfiddle from an iPhone:</p> <p><img src="https://i.stack.imgur.com/7ofOP.png" alt="enter image description here"></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload