Friday, September 30, 2016

Variation Fonts Demo

Try opening this in a recent Safari nightly build.

The first line shows the text with no variations.
The second line animates the weight.
The third line animations the width.
The fourth line animates both.

hamburgefonstiv
hamburgefonstiv
hamburgefonstiv
hamburgefonstiv
at

10 comments:

  1. AnonymousOctober 4, 2016 at 9:09 AM

    Tried it with Safary Tech Preview, Release 14 (Safari 10.1, WebKit 11603.1.6.0.2). Did not work in OS X 10.11. Any idea?

    ReplyDelete
  2. LitherumOctober 4, 2016 at 2:08 PM

    Support is currently only in WebKit Nightly builds, not Safari Technology Previews.

    ReplyDelete
  3. AnonymousOctober 5, 2016 at 12:13 AM

    Aah. Got it. Thanks.

    ReplyDelete
  4. AnonymousOctober 6, 2016 at 8:35 AM

    Is it intentional that the width of each glyph from 'font-variation-settings' doesn't actually change the amount of layout space it occupies? The word doesn't change width, even as the individual glyphs change width?

    Or is that just because of the early stage of the implementation?

    ReplyDelete
  5. LitherumOctober 6, 2016 at 5:12 PM

    This is a known bug. rdar://problem/28662086

    ReplyDelete
  6. LitherumOctober 6, 2016 at 5:20 PM

    This bug does not occur on El Capitan.

    ReplyDelete
  7. LitherumOctober 7, 2016 at 10:20 AM

    This bug was fixed in https://trac.webkit.org/changeset/206896 which is in the latest WebKit nightly build. Please try again on Sierra and let me know if it works for you! 😊

    ReplyDelete
  8. Laurence PenneyOctober 9, 2016 at 11:00 AM

    This is fab! However I can’t get font-variation-settings to work if I load Skia.ttf as a webfont via @font-face. Does it only work with fonts installed in the system?

    ReplyDelete
  9. anti.insects7@gmail.comJuly 8, 2017 at 5:11 AM

    This comment has been removed by the author.

    ReplyDelete