Cannot get the font to animate at all

Open Woolton opened this issue 4 years ago • 0 comments

I've attempted to run the code on my website a few times. While the font functions, the time axis does not ever pass 1.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <link href="https://res.cloudinary.com/dr6lvwubh/raw/upload/v1581441981/Anicons/anicons-regular.css" rel="stylesheet">
         <link rel="stylesheet" href="variablefonts.css">
  </head>
  <body>
    <style>
    test{
      font-family: "Anicons Regular", sans-serif;
}
@keyframes icon-animation {
     0% { font-variation-settings: "TIME" 1; }
   100% { font-variation-settings: "TIME" 100; }
}
.icon {
   animation: icon-animation .5s ease-in-out infinite;
}
    </style>
    <!-- replace “A” with appropriate character.--> 
    <test class=”icon”>A</test>A
  </body>
</html>

The code above is concatenated from the snippets on the use page. Am I misinterpreting something, or does Google Chrome not support variable fonts yet?

Mar 19 '21 23:03 Woolton