1

I'd like to change the font-feature settings of a font that has different stylistic sets using CSS keyframes. I use different font-feature settings outside of the animation on the same webpage, which works in both Chrome and Safari. I also use CSS keyframe animations, which also works fine in Safari. However, when I try to animate the font-feature-settings, Safari lets me down.

Here is my CSS:

.animate {
  animation: animateFont 2s linear infinite;
}

@keyframes animateFont {
  0% {
    font-feature-settings: "ss01" 1;
    -webkit-font-feature-settings: "ss01" 1;
    -moz-font-feature-settings:    "ss01" 1;
    -ms-font-feature-settings:     "ss01" 1;
    color: white;
  }
  50% {
    font-feature-settings: "ss02" 1;
    -webkit-font-feature-settings: "ss02" 1;
    -moz-font-feature-settings:    "ss02" 1;
    -ms-font-feature-settings:     "ss02" 1;
    color: red;
  }
  100% {
    font-feature-settings: "ss01" 1;
    -webkit-font-feature-settings: "ss01" 1;
    -moz-font-feature-settings:    "ss01" 1;
    -ms-font-feature-settings:     "ss01" 1;
    color: white;
  }
}

I found a lot of stuff on animations generally not working in Safari but nothing specifically on font-feature-settings. Does anyone know a CSS way to get this working?

Edit: This is an example of a ligature animatio that does work in Chrome but not in Safari.

.animate-font {
  animation: animateFont 2s linear infinite;
  font-size: 100px;
}

@keyframes animateFont {
  0% {
    font-feature-settings: "smcp" 1;
    -webkit-font-feature-settings: "smcp" 1;
    -moz-font-feature-settings: "smcp" 1;
    -ms-font-feature-settings: "smcp" 1;
  }
  50% {
    font-feature-settings: "liga" 0;
    -webkit-font-feature-settings: "liga" 0;
    -moz-font-feature-settings: "liga" 0;
    -ms-font-feature-settings: "liga" 0;
  }
  100% {
    font-feature-settings: "ss01" 1;
    -webkit-font-feature-settings: "ss01" 1;
    -moz-font-feature-settings: "ss01" 1;
    -ms-font-feature-settings: "ss01" 1;
  }
}
<div class="animate-font">
  fi
</div>
kaktus
  • 169
  • 1
  • 1
  • 11
  • Does it works on Chrome? Can you attach a working snippet? – Franco Gabriel Nov 15 '22 at 20:13
  • it does work in Chrome! So the above code is a working snippet for chrome but not for safari:) – kaktus Nov 17 '22 at 15:46
  • With no HTML we cannot test as your development environment to successfully reproduce your issue. See this to have a better understanding about snippets in stack overflow: https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do – Franco Gabriel Nov 17 '22 at 16:22
  • You're right, I though an actual example would not work without publishing the font but it does work using standard css font-feature-settings. I edited the post. Thanks for the suggestion! – kaktus Nov 19 '22 at 13:50
  • I see it working either in Chrome and Safari, my Safari version is (Version 16.0 (17614.1.25.9.10, 17614)) and I'm on a Macbook Pro with macOS Monterey 12.6, maybe this info can help you debugging your issue, but for me is working on both browsers. – Franco Gabriel Nov 19 '22 at 14:53
  • Thanks! It seems to not work on older Safari browser so I guess I'll need to find a non-css workaround :/ – kaktus Nov 21 '22 at 12:06

0 Answers0