MathieuLoutre/variable-font-demo.html

## 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>

	<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>