Layered fonts in css using Rig Shaded by Jamie Clarke

index.html

	<h1 data-heading="Magic">
		<span contenteditable data-heading="Magic">Magic</span>
	</h1>

<!-- Thank you Jamie Clarke for allowing me to use the font for my demo!! You rock. -->

layered-fonts-in-css-using-rig-shaded-by-jamie-clarke.markdown

Layered fonts in css using Rig Shaded by Jamie Clarke

CSS text effects with layered fonts. Using the font Rig Shaded for this effect. (https://www.myfonts.com/fonts/jamie-clarke-type/rig-shaded/) You can find Jamie on twitter: https://twitter.com/JamieClarkeType

I needed a couple of extra layers to create the shadows instead of using text shadow so I added a span. Unfortunately the font layers don't quite line up so I had to add some offsets to get this to work.

Thank you Jamie Clarke for allowing me to use the font for my demo!! You rock.

Check out some other cool text effects: http://codepen.io/collection/DamKJW/

A Pen by Mandy Michael on CodePen.

License.

script.js

// JS for content editable trick from Chris Coyier
var span = document.querySelector("span");

span.addEventListener("input", function() {
	var text = this.innerText;
	this.setAttribute("data-heading", text);
	this.parentElement.setAttribute("data-heading", text);
});

style.scss

$red: #fe4560;
$blue: #98b5cc;

html,
body {
	background: #e4e2f2;
	width: 100%;
	height: 100%;
}

$face: #91d4ff;
$flourish: #fff;
$shadowdots: #040351;
$shadow: #4d8bea;
$shadow2: #cbc7e3;

h1 {
	font-family: 'Rig Bold Face', sans-serif;
	text-transform: uppercase;
	font-size: 18vw;
	text-align: center;
	font-weight: normal;
	margin: 0;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	position: absolute;
	color: $face;

	&:before,
	&:after, 
	span:before, 
	span:after {
		content: attr(data-heading);
		position: absolute;
		overflow: hidden;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 5;
		font-weight: normal;
		text-shadow: none;
	}
	
	&:before {
 		color: $flourish;
 		font-family: 'Rig Bold Inline', sans-serif;
	}
	
	&:after {
 		font-family: 'Rig Bold Coarse', sans-serif;
 		color: $shadowdots;
	}
}

span {
	&::before {
		font-family: 'Rig Bold Shadow', sans-serif;
		color: $shadow2;
		z-index: -1;
	}
	
	&::after {
		font-family: 'Rig Bold Extrude', sans-serif;
		color: $shadow;
		z-index: -1;	
	}
	
}



@font-face {
	font-family:'Rig Bold Coarse'; 
	src:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/Rig-BoldCoarse.otf');
}

@font-face {
	font-family:'Rig Bold Extrude'; 
	src:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/Rig-BoldExtrude.otf');
}

@font-face {
	font-family:'Rig Bold Shadow'; 
	src:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/Rig-BoldShadow.otf');
}

@font-face {
	font-family:'Rig Bold Face'; 
	src:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/Rig-BoldFace.otf');
}

@font-face {
	font-family:'Rig Bold Inline'; 
	src:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/Rig-BoldInline.otf');
}