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

<!-- Thank you Jamie Clarke for allowing me to use the font for my demo!! You rock. -->
$red: #fe4560;
$blue: #98b5cc;

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;

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

@font-face {
	font-family:'Rig Bold Extrude'; 

@font-face {
	font-family:'Rig Bold Shadow'; 

@font-face {
	font-family:'Rig Bold Face'; 

@font-face {
	font-family:'Rig Bold Inline'; 
View Compiled
// 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);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.