Print

by SBCCH1

HTML

<input id="TextInput" type="text" name="text" placeholder="Enter Word to Preview">

<select id="Fonts" name="fonts">
  <option value="Print1">Print 1</option>
  <option value="Times">Print 2</option>
  <option value="Print3">Print 3</option>
  <option value="Print4">Print 4</option>
  <option value="Arial">Print 5</option>
  <option value="tk-benton-sans-extra-compressed">Print 6</option>
  <option value="Print7">Print 7</option>
  <option value="Print8">Print 8</option>
</select>

<div id="Preview" class="Print1">Text Preview</div>

CSS

@font-face {font-family: 'Print1';
src: url('https://static1.squarespace.com/static/5e80e07acc76e2321552d6bf/t/5ed99af32571ac440cb5a4c3/1591319284129/Champagne+%26+Limousines.ttf');}

@font-face {font-family: 'Times';}

@font-face {font-family: 'Print3';
src: url('https://static1.squarespace.com/static/5e80e07acc76e2321552d6bf/t/5ed99cedb3765331135ac9be/1591319789698/simplicity.ttf');}

@font-face {font-family: 'Print4';
src: url('https://static1.squarespace.com/static/5e80e07acc76e2321552d6bf/t/5ed99d47723d53165e2c998c/1591319880453/Great+Wishes.otf');}

@font-face {font-family: 'Print7';
src: url('https://static1.squarespace.com/static/5e80e07acc76e2321552d6bf/t/5f513c1d2b3bb75872c35f80/1599159326447/Donkey+Casting.ttf');}

@font-face {font-family: 'Print8';
src: url('https://static1.squarespace.com/static/5e80e07acc76e2321552d6bf/t/5f513cc09fe0f912dd660d37/1599159488967/Dashing+Unicorn.ttf');}

@font-face {font-family: 'Arial';}

@font-face {
font-family:"benton-sans-extra-compressed";
src:url("https://use.typekit.net/af/16eed0/00000000000000003b9b2d21/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff2"),url("https://use.typekit.net/af/16eed0/00000000000000003b9b2d21/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff"),url("https://use.typekit.net/af/16eed0/00000000000000003b9b2d21/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:300;
}



body {
  padding: 12px;
}
.Print1 {
  font-family: 'Print1', cursive;
}
.Cursive2 {
  font-family: 'Times', cursive;
}
.Print3 {
font-family: 'Print3', cursive;
}
.Print4 {
font-family: 'Print4', cursive;
}
.Arial {
font-family: 'Arial', serif;
}
.tk-benton-sans-extra-compressed { font-family: "benton-sans-extra-compressed",sans-serif; }
.Print7 {
font-family: 'Print7', cursive;
}
.Print8 {
font-family: 'Print8',...

JavaScript

var TextInput = document.getElementById('TextInput');
var Fonts = document.getElementById('Fonts');
var Preview = document.getElementById('Preview');

TextInput.addEventListener('keyup', textChange, false);
function textChange(){
  Preview.textContent = TextInput.value;
}

Fonts.addEventListener('change', fontChange, false);
function fontChange(){
  Preview.className = this.value;
  console.log(this.value)
}