Let’s say I would like to use this font:

@font-face {
  src: url("https://cdn.glitch.global/f206356a-29f3-4941-a91f-d78ba238df98/Abelone-FREE.otf?v=1650648293770") format("opentype");
  font-family: "Abelone";
}

* {
  font-family: "Abelone";
  font-size: 80px;
}

Hello, world.

Is there a way to animate the included gradients with CSS or JavaScript? If not, are there alternative ways to do something similar using just SVG or clipping masks, for example?

Important: Chrome doesn’t show the gradients. Please use Firefox to view them.

Edit: Opentype Svg font display/rendering

1. Colored Opentype Svg fonts supported (firefox, edge, ios safari)
2. Opentype Svg font features not supported (e.g chrome)

About used font: ColorFontWeek – Abelone