Cursive Fonts

by SBCCH1

HTML

<link rel="stylesheet" href="https://p.typekit.net/p.css?s=1&amp;k=zgh5ghy&amp;ht=tk&amp;f=30856&amp;a=23503952&amp;app=typekit&amp;e=css">
<input id="TextInput" type="text" name="text" placeholder="Enter Word to Preview">

<select id="Fonts" name="fonts">
  <option value="Cursive1">Cursive 1</option>
  <option value="Cursive2">Cursive 2</option>
  <option value="Cursive3">Cursive 3- letters only</option>
  <option value="Cursive4">Cursive 4</option>
  <option value="Cursive5">Cursive 5</option>
  <option value="Cursive6">Cursive 6- letters only</option>
  <option value="Cursive7">Cursive 7</option>
  <option value="Cursive8">Cursive 8</option>
  <option value="Cursive9">Cursive 9</option>
   <option value="Cursive10">Cursive 10- letters only</option>
</select>

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

CSS

@font-face {font-family: 'Cursive1';
src: url('https://static1.squarespace.com/static/5e80e07acc76e2321552d6bf/t/5ed43b4c30af07074f877b16/1590967117048/magnolia_sky.ttf');}

@font-face {font-family: 'Cursive2';
src: url('https://static1.squarespace.com/static/5e80e07acc76e2321552d6bf/t/5edaa1f25f949f032022f042/1591386610355/FontsFree-Net-Grafolita-Script-W01-Medium.ttf');
}

@font-face {font-family: 'Cursive3';
src: url('https://static1.squarespace.com/static/5e80e07acc76e2321552d6bf/t/5ed45be86472ff777abb0eea/1590975465109/Albret.ttf');}

@font-face {font-family: 'Cursive4';
src: url('https://static1.squarespace.com/static/5e80e07acc76e2321552d6bf/t/5ed45de43ae6e43edd8a1bbd/1590975972553/Belinda+Script+copy.otf');}

@font-face {font-family: 'Cursive5';
src: url('https://static1.squarespace.com/static/5e80e07acc76e2321552d6bf/t/5ed45ea7123e6107725ca58d/1590976167836/cursive5.ttf');}

@font-face {font-family: 'Cursive6';
src: url('https://static1.squarespace.com/static/5e80e07acc76e2321552d6bf/t/5ed45f36939ba41cd17a075c/1590976310371/cursive+6.ttf');}

@font-face {font-family: 'Cursive7';
src: url('https://static1.squarespace.com/static/5e80e07acc76e2321552d6bf/t/5ed45ff0dc0c1978e67a2a21/1590976497237/cursive7.ttf');}

@font-face {font-family: 'Cursive8';
src: url('https://static1.squarespace.com/static/5e80e07acc76e2321552d6bf/t/5ed990b2350845196bdcca91/1591316659124/Magnolia+Script.otf');}

@font-face {font-family: 'Cursive9';
src: url('https://static1.squarespace.com/static/5e80e07acc76e2321552d6bf/t/5ed9ad6e2887e86c10c422c1/1591324015265/harley.ttf');}

@font-face {font-family: 'Cursive10';
src: url('https://static1.squarespace.com/static/5e80e07acc76e2321552d6bf/t/5eda90fd320e812026cc97f6/1591382269684/Amsterdam+Personal+Use.ttf');}

body {
  padding: 12px;
}
.Cursive1 {
  font-family: 'Cursive1', cursive;
}
.Cursive2 {
  font-family: 'Cursive2', cursive;
}

.Cursive3 {
font-family: 'Cursive3', cursive;
}
.Cursive4 {
font-family: 'Cursive4',...

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)
}