Variable Fonts playground made with Mavo

index.html

<p>Variable Fonts</p>

style.css

@font-face {
	/* Downloaded from axis-praxis.org, font from https://github.com/TypeNetwork/fb-Amstelvar. Oddly the one on Github supported fewer axes and had different values wtf */
	src: url('https://lea.verou.me/files/AmstelvarAlpha-Variations.ttf') format('truetype');
	font-family: Amstelvar;
}

body {
	margin: 0;
	height: 100vh;
	display: flex;
	align-items: center;
	align-content: center;
	overflow: hidden;
}

p {
	font-family: Amstelvar;
	font-size: 25rem;
	background: white;
	flex: 1 0 auto;
	text-align: center;
	font-variation-settings: 'wght' 75, 'cntr' 121, 'grad' 253, 'opsz' 27, 'wdth' 258, 'prwd' 804, 'prwg' 181, 'srfr' 50, 'xhgt' 890;
	animation: grow 3s infinite;
}

@keyframes grow {
	to {
		font-variation-settings: 'wght' 500, 'cntr' 121, 'grad' 303, 'opsz' 48, 'wdth' 800, 'prwd' 804, 'prwg' 181, 'srfr' 4, 'xhgt' 1200;
	}
}

@supports not (font-variation-settings: inherit) {
	[property=text]::before {
		content: "Your browser does not support "
	}
	
	[property=text]::after {
		content: "😭"
	}
}

styles

<link href="https://dev.mavo.io/dist/mavo.css" rel="stylesheet" />

variable-fonts-playground-made-with-mavo.markdown

Variable Fonts playground made with Mavo

A Pen by gregwhitworth on CodePen.

License.