Font preloading

by vijayweb

HTML

<script src="https://rawgit.com/bramstein/fontfaceobserver/master/fontfaceobserver.js"></script>






    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

    <link href="https://www.jquery-az.com/boots/css/bootstrap-colorpicker/bootstrap-colorpicker.css" rel="stylesheet">
    <script src="https://www.jquery-az.com/boots/js/bootstrap-colorpicker/bootstrap-colorpicker.js"></script>


<h2><a href="#" id="addText">Add Another Input Box</a></h2>

<div id="textBoxes" class=''>

</div>

<div id='canvas'></div>

CSS

@import url('https://fonts.googleapis.com/css?family=Pacifico|VT323|Quicksand|Inconsolata');



@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',...

JavaScript

$(function() {
  var scntDiv = $('#p_scents');
  var i = $('#p_scents p').size() + 1;



  $("#addText").click(function() {
    $('<div name="text_' + i + '" class="text_' + i + '_text"><input class="input-large" type="text" id="p_scnt" size="20" name="text_' + i + '" value="" placeholder="Enter Text Here" /> <select  class="text_' + i + '_fonts" id="font-family_' + i + '" name="fonts">Change Text Style</select><a href="#" name="text_' + i + '" class="btn btn-default color-picker">Text Color</a>  <a href="#" name="text_' + i + '" class="btn btn-default color-picker2">Text Stroke</a> <p class="font-size-label text_' + i + '_num" num="0">Font Size</p><button name="text_' + i + '" class="up">+</button><p>0</p><button name="text_' + i + '" class="down">-</button><a href="#" name="text_' + i + '" id="remX">X</a></div>').appendTo(textBoxes);

    $('#canvas').append('<div style="font-size:40px" class="text_' + i + '_title"></div>').draggable().resizable();

    //   $("text_" + i + "_title").draggable();

    colorBox();
    fonts(i);
    i++;
    return false;
  });


});



$(document).on("keyup", "input", function() {
  var idVal = $(this).attr('name') + '_title';


  $('.' + idVal).html($(this).val());
});

$(document).on("click", "#remX", function() {
  var remVal = $(this).attr('name');

  console.log(remVal);
  $('.' + remVal + '_text').remove();
  $('.' + remVal + '_title').remove();
});


$(document).on("change", "#fontSize", function() {
  var fontSize = $(this).val();
  console.log(fontSize);

  var titleDiv = $(this).attr('name') + '_title';
  console.log(titleDiv);
  $('.' + titleDiv)[0].css("font-size", "32px");



});



/*fonts*/


function fonts(i) {
  // Define an array with all fonts
  var fonts = ["Pacifico", "VT323", "Quicksand", "Inconsolata", "Cursive1", "Cursive2", "Cursive3", "Cursive4", "Cursive5", "Cursive6", "Cursive7", "Cursive8"];


  fonts.forEach(function(font) {
    var option = document.createElement('option');
    option.innerHTML =...