Change CSS font-face dynamically with JavaScript/JQuery

I'm trying to develop a code that is able to change the font of an element dynamically by using a font file (TTF) uploaded. The code below works fine in Chrome, Opera and Firefox, but doesn't work in IE, Edge and Safari.

<html>
<head>   
<style>
#my-font {
    margin-top: 50px;
    font-size: 20pt;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script>
    $(function(){
        $("#font").change(function(){
            // post the font file to the php script that will move the file uploaded to the folder "fonts"
            $.ajax( {
                url: 'movefontfile.php',
                type: 'POST',
                data: new FormData($("#send")[0]),
                processData: false,
                contentType: false,
            }).done(function(name){
                // set the font face
                var f = new FontFace("myfont", "url(fonts/"+name+")", {});
                f.load().then(function (loadedFace) {
                    document.fonts.add(loadedFace);
                    var fptags = document.getElementById('my-font');
                    fptags.style.fontFamily = "myfont, sans-serif";
                });
            });         
        })
    });
</script>
</head>

<body>
    <form id="send">
    <input type="file" id="font" name="font">
    </form>
    <p id="my-font">
        This is a font text
    </p>
</body>

</html>

This is the php code:

<?php
$name = $_FILES['font']['name'];
move_uploaded_file($_FILES['font']['tmp_name'], 'fonts/'.$name);
echo $name; 
?>

Someone could help me? I need a code that works in every popular browser. Thanks.

Solution

I find a solution that works in Safari and Edge, but doesn't works to IE yet.

It is very ugly, but works:

<html>
<head>

<style>
#my-font {
    margin-top: 50px;
    font-size: 20pt;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
    var font;
    $(function(){
        $("#font").change(function(){
            // post the font file to the php script that will move the file uploaded to the folder "fonts"
            $.ajax( {
                url: 'movefontfile.php',
                type: 'POST',
                data: new FormData($("#send")[0]),
                processData: false,
                contentType: false,
            }).done(function(data){
                $('link[rel=stylesheet][href="'+font+'.css"]').remove();
                font = data;
                $('head').append('<link rel="stylesheet" type="text/css" href="'+data+'.css">');
                $('#my-font').css('font-family', 'myfont, sans-serif');
            });         
        })
    });
</script>
</head>

<body>
    <form id="send">
    <input type="file" id="font" name="font">
    </form>
    <p id="my-font">
        This is a font text
    </p>
</body>

</html>

And the PHP script:

<?php
$name = $_FILES['font']['name'];

move_uploaded_file($_FILES['font']['tmp_name'], 'fonts/'.$name);

$css = file_get_contents('font-face-aux.css');

$css = str_replace('?FONT_NAME?', $name, $css);

$f = fopen($name.'.css', 'w');
fwrite($f, $css);
fclose($f);
echo $name;
?>

And the auxiliar CSS:

@font-face {
    font-family: 'myfont';
    src: url('fonts/?FONT_NAME?');
}