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

10 comments:

  1. 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. Support is currently only in WebKit Nightly builds, not Safari Technology Previews.

    ReplyDelete
  3. Aah. Got it. Thanks.

    ReplyDelete
  4. 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. This is a known bug. rdar://problem/28662086

    ReplyDelete
  6. This bug does not occur on El Capitan.

    ReplyDelete
  7. 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. 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. This comment has been removed by the author.

    ReplyDelete