Text Effect: Variable Fonts Template - DECOVAR

index.html

<h1 data-text="Hello">Hello</h1>

style.scss

@font-face {
	font-family: 'Decovar'; 
	src:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/DecovarVF.ttf');
}

h1 {
	margin: 0;
	font-size: 20vw;
	position: relative;
	font-weight: 400;
		
	// Define the font family
	font-family: "Decovar"; 
	// Set your variable font settings.
    // A visualisation can be seen on the AxisPraxis website: 
	// https://www.axis-praxis.org/specimens/decovar
	font-variation-settings: 
		'BLDA' 200, 
		'TRMD' 0, 
		'TRMC' 0, 
		'SKLD' 300, 
		'TRML' 0, 
		'SKLA' 0, 
		'TRMF' 0, 
		'TRMK' 0, 
		'BLDB' 0, 
		'WMX2' 0, 
		'TRMB' 0, 
		'TRMA' 0, 
		'SKLB' 0, 
		'TRMG' 0, 
		'TRME' 0;
}


// Layering with pseudo-elements
h1::before {
	// Pass in the name of the data-attribute on the h1. This 
	// tells your CSS what text you want displayed on your new layer.
	// Typically we want this the same as our h1 text.
	content: attr(data-text);
	
	// Set the width to 100% of your h1 to ensure it doesn't wrap.
	width: 100%;
	
	// Set position to absolute - remove it from the flow of
	// elements and allows you to set it exactly over the top 
	// of your h1 creating your layer.
	position: absolute;
	
	// Set the co-ordinates you want your layer to be positioned from. 
	// Resetting to top left just makes sure it sits over the top.
	// You can offset these if you don't want perfect alignment.
	left: 0;
	top: 0;
}



// Positioning - This is general CSS positioning to center the text in the page. It's not required for the text effect you can modify these however you like.
html {
	height: 100%;
}

body {
	background: #fff;
	height: 100%;
}

h1 {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	text-align: center;
	
	&:after, &:before {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
}

text-effect-variable-fonts-template-decovar.markdown

Text Effect: Variable Fonts Template - DECOVAR

Starting Variable fonts template for playing around with Decover.

A Pen by Mandy Michael on CodePen.

License.