Change CSS font-face dynamically with JavaScript/JQuery

Question

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.

You would likely have to reload the page in those browsers.

Jay Blanchard
– Jay Blanchard

2016-04-07 21:04:29 +00:00
Commented Apr 7, 2016 at 21:04 — Jay Blanchard
– Jay Blanchard, Commented Apr 7, 2016 at 21:04

Chris · Accepted Answer · 2016-04-07 23:05:44Z

1

IE and Edge don't have support for the JavaScript FontFace object. You might have better luck dynamically creating the CSS @font-face code, like so:

$.ajax( {
    url: 'movefontfile.php',
    type: 'POST',
    data: new FormData($("#send")[0]),
    processData: false,
    contentType: false,
}).done(function(data){
    $('<style>').text("@font-face {font-family: 'myfont'; src: url('fonts/myfont.ttf');}");
    var fptags = document.getElementById('my-font');
    fptags.style.fontFamily = "myfont, sans-serif";
});

answered Apr 7, 2016 at 23:05

Chris

5,9562 gold badges23 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Breno Macena Over a year ago

Hi, thank you very much for your reply. I've tried this before, and doesn't worked. It simply doesn't changes the font, I don't know why. But anyway, thank you.

Chris Over a year ago

@BrenoMacena I tested it in Edge and it worked. Which browser were you having problems with?

Breno Macena Over a year ago

Well, I tested it in Edge as well. And did not work. This is really strange. Maybe be the font files that I am using. But with the same files, works in Chrome.

Breno Macena Over a year ago

I made a small modification in code (see above) to allow that the font to change every time that I upload a new file. Before, the font changed only in first upload. But this don't solve my problem.

Satya Prasad Sarilla · Accepted Answer · 2016-04-08 13:39:50Z

0

Try to use the browser debugger by pressing F12 key and check the font on the <p> tag.

<p id="my-font">

Fix it on console window and update your code accordingly.

answered Apr 8, 2016 at 13:39

Satya Prasad Sarilla

404 bronze badges

Comments

Breno Macena · Accepted Answer · 2016-04-08 14:30:20Z

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?');
}

Collectives™ on Stack Overflow

Change CSS font-face dynamically with JavaScript/JQuery

3 Answers 3

4 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Related