<div contenteditable>
Ransom note with Google fonts.
</div>

/*First fetch a bunch of subsets from Google*/

@import url('https://fonts.googleapis.com/css?family=Arbutus&text=ABCabc');
@import url('https://fonts.googleapis.com/css?family=Rye&text=Dd');
@import url('https://fonts.googleapis.com/css?family=Jolly+Lodger&text=EFef');
@import url('https://fonts.googleapis.com/css?family=Henny+Penny&text=GHgh');
@import url('https://fonts.googleapis.com/css?family=Pirata+One&text=Ii');
@import url('https://fonts.googleapis.com/css?family=Luckiest+Guy&text=JKLjkl');
@import url('https://fonts.googleapis.com/css?family=McLaren&text=MNmn');
@import url('https://fonts.googleapis.com/css?family=Ribeye&text=Oo');
@import url('https://fonts.googleapis.com/css?family=Bowlby+One+SC&text=PQpq');
@import url('https://fonts.googleapis.com/css?family=New+Rocker&text=Rr');
@import url('https://fonts.googleapis.com/css?family=Finger+Paint&text=STUstu');
@import url('https://fonts.googleapis.com/css?family=Fredoka+One&text=VWXvwx');
@import url('https://fonts.googleapis.com/css?family=Sigmar+One&text=YZyz');	
@import url('https://fonts.googleapis.com/css?family=Nova+Cut&text=%21%22%24');
@import url('https://fonts.googleapis.com/css?family=Miltonian&text=%26%2A%28%29');
@import url('https://fonts.googleapis.com/css?family=Irish+Grover&text=%2D%2B');
@import url('https://fonts.googleapis.com/css?family=Black+Ops+One&text=%40%3D%7E');
@import url('https://fonts.googleapis.com/css?family=Bubblegum+Sans');

/* Then put them in a contenteditable font stack */

[contenteditable] {
  font-family: Arbutus, Rye, Henny Penny, Luckiest Guy, McLaren, Bowlby One SC, Finger Paint,Fredoka One, Sigmar One, Chewy, Nova Cut, Miltonian, Irish Grover, Black Ops One, Diplomata SC, Pirata One, Ribeye, New Rocker, Bubblegum Sans, Georgia, serif;
}

/* The rest is just generic stuff */

[contenteditable] {
  max-width: 20em;
  margin: 2em auto;
  font-size: 3em;
  word-spacing: 0.25em;
  border: 2px solid;
  text-align: center;
  position: relative;
  padding: 1em;
  line-height: 1.125;
}

[contenteditable]:focus {
  border: 3px solid;
}

[contenteditable]:before {
  content: 'type in the box';
  font-size: 16px;
  font-family: arial, sans-serif;
  font-variant: small-caps;
  position: absolute;
  right: 1em;
  top: -2.33em;
  height: 2em;
  line-height: 2em;
  background: #000;
  color: #fff;
  padding: 0.125em 0.5em;
  word-spacing: normal;
}