Skip to content

Instantly share code, notes, and snippets.

@MathieuLoutre

MathieuLoutre/variable-font-demo.html

Created April 7, 2018 22:28
Show Gist options
  • Save MathieuLoutre/df4c5561f41bebf21a2d3de680aa002c to your computer and use it in GitHub Desktop.
Save MathieuLoutre/df4c5561f41bebf21a2d3de680aa002c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
variable-font-demo.html
<html>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=9">
<head>
<title>OTVar Test: Marvin Visions</title>
<style>
@font-face {
font-family: "MarvinVisions";
src: url(MarvinVisionsGX.ttf);
}
html, body {
background: rgb(30, 30, 30);
color: rgb(254, 253, 251);
margin: 0;
padding: 0;
}
body {
display: flex;
}
#text {
font-size: 27vw;
font-family: 'MarvinVisions';
font-feature-settings: "kern" on;
font-variation-settings: "wght" 170, "opsz" 100;
line-height: 0.8;
margin: auto;
text-align: center;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js"></script>
</head>
<body>
<p id="text">Marvin<br/>Visions</p>
<script>
var updateVariableFont = function () {
var keys = Object.keys(axis).filter(function (key) { return key.indexOf('_') === -1 })
var style = "font-variation-settings: "
for (var i = 0; i < keys.length - 1; i++) {
style += '"'+ keys[i] +'" '+ Math.round(axis[keys[i]]) +', '
}
style += '"'+ keys[keys.length - 1] +'" '+ Math.round(axis[keys[keys.length - 1]]) +''
if (axis._fontSize) {
style += "; font-size: " + axis._fontSize + "vw;"
}
document.getElementById('text').style = style
}
var axis = { wght: 170, opsz: 100, _fontSize: 27 }
var tl = new TimelineMax({ delay: 2, onUpdate: updateVariableFont }).timeScale(1)
tl.to(axis, 2, { wght: 20 })
tl.to(axis, 1, { _fontSize: 5, wght: 120, opsz: 80 })
tl.to(axis, 1, { wght: 20 })
tl.to(axis, 2, { wght: 170, opsz: 100, _fontSize: 27 })
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment