Salou is available as a Variable Font. Here are some examples showing the usage of variable fonts and Salou Variable in particular, including the needed CSS and JS code.

---

Basic Variable Font CSS Settings

By embedding Salou as one (variable webfont) file you get access to countless typographic options. Salou comes with two axis, one for Weight (‘wght’) and one for Slant (‘slnt’). The Weight axes ranges from 100 to 900, and the Slant axis from 0 to -16.

YOUR CHOICE
0 1 2 3 4 5 6 7 8 9

With the @font-face declaration variable webfonts can be embeded as simple as every static webfont. Note that the font-weight property is showing the range of the weight axis.

@font-face {
  font-family: "SalouVAR";
  src: url("/webfonts/Salou-VF.woff2") format("woff2-variations"),
       url("/webfonts/Salou-VF.woff") format("woff-variations");
       font-weight: 100 900;
} 

Now you can choose: using the font as usual by picking one of the predefined weights or styles (in variable fonts this is called an instance) using font-weight and font-style or create your own weight and style via the font-variation-settings by entering a number.

// HTML
<p class="VARtext">YOUR CHOICE<br>
    <span>0</span>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    <span>7</span>
    <span>8</span>
    <span>9</span>
</p>

// CSS
p.VARtext { 
    font-family: "SalouVAR"; 
    font-weight: bold;
    font-style: italic;
}
p.VARtext span:nth-of-type(1) { 
    font-variation-settings: "wght" 100, "slnt" 0; 
}
p.VARtext span:nth-of-type(2) { 
    font-variation-settings: "wght" 150, "slnt" -1; 
}
p.VARtext span:nth-of-type(2) { 
    font-variation-settings: "wght" 210, "slnt" -2; 
}
p.VARtext span:nth-of-type(2) { 
    font-variation-settings: "wght" 315, "slnt" -3; 
}
...

In this example we’ve picked a little bit different values for every number in a <span> and for the text we just used the classic font-weight and font-style properties.

---

Button Effects

And now by adding some transition and :hover we easily create some dynamic button. Look it even bounces!

.variable-button { 
       font-family: "SalouVAR"; 
       font-variation-settings: "wght" 500, "slnt" 0;
       transition: font-variation-settings 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.variable-button:hover { 
       color: #fff; font-variation-settings: "wght" 800, "slnt" -16; 
}

---

Mouse Move

Adding some lines of Javascript allows us to bind the variable font axis to the movements of the mouse. Move your mouse..

Move It!

// JS
window.addEventListener("mousemove", e => {
  minFontWeight = 100
  maxFontWeight = 900
  fontWeightPercent = (maxFontWeight - minFontWeight) / 100;
  minFontSlant = 0
  maxFontSlant = -16
  fontSlantPercent = (maxFontSlant - minFontSlant) / 100;

  const widthPercent = e.clientX / window.innerWidth * 100;
  const heightPercent = e.clientY / window.innerHeight * 100;
  const newWeight = minFontWeight + ( Math.round(fontWeightPercent * widthPercent) );
  const newSlant = minFontSlant + ( Math.round(fontSlantPercent * heightPercent) );
  const varText = document.querySelector(".VARtext-mouse");   
  varText.style.fontVariationSettings = "\"wght\" " + newWeight + ", \"slnt\" " + newSlant;; 

}); 

---

Keyframe Animation

And finally here is a simple animation using CSS @keyframes.

Moving Type

// CSS
@keyframes salou-animation { 
  from { font-variation-settings: "wght" 100, "slnt" 0; }
  to { font-variation-settings: "wght" 900, "slnt" -16; }
}
.storycontent p.VARtext-animation { 
  font-family: "SalouVAR"; 
  font-variation-settings: "wght" 100, "slnt" 0; 
  transition: font-variation-settings 0.3s ease;
  animation-name: salou-animation; 
  animation-duration: 2s;
  animation-direction: alternate; 
  animation-iteration-count: infinite; 
  animation-timing-function: ease; 
}