Dynamically load web font

Question

I'm new to this web font thing. I understand that a certain font can be downloaded from a URL and used in a web page.

My question is: is it possible to load a web font dynamically depending on the user input? Simply scenario: user type in some text in the text field and select a font name which was not loaded yet. Some javascript code is triggered to dynamically load a web font resource. Is this possible?

Start of by giving us some HTML to work with. For instance, you say you want user input so there's an input field. But should the user be able to choose from a pre-defined list, or can it be any font? The latter is not a good idea because there are a lot of font that aren't free to use. Also, where do you want to get your webfonts from? Google Fonts? Or another resource? And what about weights? All available weights, or only `normal`? And what should happen when the user inputs the font he or she wants? Should all body text become that font? A lot of questions. So please further specify. — Bram Vanroy, Sep 11 '15 at 14:22
http://stackoverflow.com/questions/14856721/dynamically-load-fonts-html-jquery — Madalina Taina, Sep 11 '15 at 14:38
This may helps too http://stackoverflow.com/questions/16553326/dynamically-load-google-fonts-after-page-has-loaded — Madalina Taina, Sep 11 '15 at 14:39
And here is an example with a select http://amirush.blogspot.ro/2013/07/dynamic-loading-of-web-fonts.html http://jsfiddle.net/amir_ch/x63jF/ — Madalina Taina, Sep 11 '15 at 14:43

score 12 · Answer 1 · edited May 23 '17 at 12:09

Try this (for Google web fonts):

<span>Select font:</span>
<select onchange=fontSelected(event)>
    <option value="default">Browser Default</option>
    <option value="Droid+Sans">Droid Sans</option>
    <option value="Open+Sans">Open Sans</option>
</select>
<h1 id="theText">This is a sample text...</h1>

function fontSelected(e){
    var select = e.target;
    if (select.selectedIndex > 0) { // web font
        var fontID = select.options[select.selectedIndex].value;
        if (!document.getElementById(fontID)) {
            var head = document.getElementsByTagName('head')[0];
            var link = document.createElement('link');
            link.id = fontID;
            link.rel = 'stylesheet';
            link.type = 'text/css';
            link.href = 'http://fonts.googleapis.com/css?family='+fontID;
            link.media = 'all';
            head.appendChild(link);
        }
        document.getElementById("theText").style.fontFamily = select.options[select.selectedIndex].innerHTML;
    }else{ // default browser font
        document.getElementById("theText").style.fontFamily = null;
    }
}

http://jsfiddle.net/zejz2tkp/1/

This code is bassed on this post: http://amirush.blogspot.ro/2013/07/dynamic-loading-of-web-fonts.html

You can also use one of the existent answers: Load external font with javascript and jquery or dynamically load fonts html jquery

Dynamically load web font

1 Answers1