<!DOCTYPE html>
<html lang="en-US">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sanctuary</title>
    
    
    <style>
@font-face {
    font-family: myFirstFont;
    src:url("https://www.grapheine.com/wp-content/uploads/2024/01/Sanctuary-Bleu-Nuit-Regular.otfSanctuary-Noir-Regular.otf"),
	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;
</style>

<script> 


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() {

   	k--;
   	 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() {
 (async()=>{
   // 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;
    setInterval(()=>{
        k--;
       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);
})();
}
changefontFamily();*/



 function myfunction(myvar)
        {
            document.querySelector("p").style.fontFeatureSettings = myvar;
            console.log('Function:', myvar);
        }
</script>


</head>
 
<body>


<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>
   
</div>
</body> 
 
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.