Skip to content

Cannot get the font to animate at all #12

Description

@Woolton

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?

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions