<!DOCTYPE html>
<html lang="en-US">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
@font-face {
    font-family: myFirstFont;
	url('https://www.grapheine.com/wp-content/uploads/2024/01/Sanctuary-Bleu-Nuit-Regular.woff') format('woff'),
          url('https://www.grapheine.com/wp-content/uploads/2024/01/Sanctuary-Bleu-Nuit-Regular.woff2') format('woff2');
    font-feature-settings: "normal";

body {
    font-family: myFirstFont;
  background-color: #F2F2F2;


var counter = 10;
var myFunction = function() {
    counter *= 10;
    setTimeout(myFunction, counter);
setTimeout(myFunction, counter);

const fonts = ['ss01', 'ss02', 'ss03', 'ss04', 'ss05', 'ss06', 'ss07', 'ss08', 'ss09', 'ss10', 'ss11', 'ss12', 'ss13', 'ss14', 'ss15', 'ss16', 'ss17', 'ss18', 'ss19','ss20', 'ss00'];
var k = fonts.length;
t = 100;
tour = -5;
function changefontFamily() {

   	 document.querySelector("body").style.fontFeatureSettings = "'"+fonts[k]+"'";
   	 counter = t;
   	 t = 20*Math.abs(tour);
   setTimeout(changefontFamily, counter);
   if(k === 0){
   k = fonts.length;
   if (tour>-5){ tour=tour-1;}
 	else if(tour==-5){tour=5;}

setTimeout(changefontFamily, 0);

function changefontFamily() {
   // const elem = document.getElementById('elementID');
    const fonts = ['ss01', 'ss02', 'ss03', 'ss04', 'ss05', 'ss06', 'ss07', 'ss08', 'ss09', 'ss10', 'ss11', 'ss12', 'ss13', 'ss14', 'ss15', 'ss16', 'ss17', 'ss18', 'ss19','ss20'];

   var k = fonts.length;
       document.querySelector("p").style.fontFeatureSettings = "'"+fonts[k]+"'";
            console.log('Now:', fonts[k]);
        // elem.style.fontFeatureSettings = fonts[k];
       // var s = elem.style.cText;
        //elem.setAttribute("style", s);
        if(k === 0)k = fonts.length;
    }, 50);

 function myfunction(myvar)
            document.querySelector("p").style.fontFeatureSettings = myvar;
            console.log('Function:', myvar);


<div id="elementID">

   <p><div style="font-size:120px;line-height:0.9em;"> Sanctuary<br>on the Moon</div><br><div style="font-size:32px;">
   This is a variable font programmed to rotate the letters "O" and "o". The open-type properties allow for 21 letter alternatives. We have therefore broken down the movement of the letters into 21 images. </div></p>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.