engravings2

by vijayweb

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fontfaceobserver/2.1.0/fontfaceobserver.standalone.js" integrity="sha512-u/yLQ5Cr3lmywJXLvtkKXONhFOU2GA5dvhIw4yxI9oMcs36TpQfu3yW3fOFEsFlxTQ4BgM0Cc/dWzAUMdFopjA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

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

<select id="Fonts" name="fonts">
  <option value="Cursive1">Engrave 1</option>
  <option value="Engrave2">Engrave 2- letters only</option>
  <option value="Cursive3">Engrave 3- letters only</option>
  <option value="Cursive4">Engrave 4</option>
  <option value="Cursive5">Engrave 5</option>
  <option value="Cursive6">Engrave 6- letters only</option>
  <option value="Cursive7">Engrave 7</option>
  <option value="Cursive8">Engrave 8</option>
  <option value="Cursive9">Engrave 9</option>
   <option value="Engrave10">Engrave 10</option>
   <option value="Cursive10">Engrave 11-letters only</option>
    <option value="Cursive2">Engrave 12</option>
    <option value="Gidugu1">Gidugu</option>
      <option value="Gidugu2">Gidugu</option>
        <option value="Gidugu3">Gidugu</option>
          <option value="Gidugu4">Gidugu</option>
            <option value="Gidugu5">Gidugu</option>
              <option value="Gidugu6">Gidugu</option>
                <option value="Gidugu7">Gidugu</option>
                  <option value="Gidugu8">Gidugu</option>
                    <option value="Gidugu9">Gidugu</option>
                      <option value="Gidugu10">Gidugu</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: 'Engrave2';
src: url('https://static1.squarespace.com/static/5e80e07acc76e2321552d6bf/t/5ed45699b97d276149c2dc14/1590974106014/Stea+Font.otf');}

@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: 'Engrave10';
src: url('https://static1.squarespace.com/static/5e80e07acc76e2321552d6bf/t/5eda8f73320e812026cc465f/1591381875577/hello+honey.otf');}

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

@font-face {font-family: 'Cursive2';
src:...

JavaScript

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

var font = new FontFaceObserver('Gidugu Italic');

font.load().then(function () {
  console.log('Output Sans has loaded.');
});



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