dynamically load fonts html jquery

Question

I am working on a site that allows the user to enter some text and drag it into position, etc. I have gotten to a point I would like to offer a choice of fonts. Can I dynamically load fonts instead of all at once? For instance, the user enters their text and chooses to use "Generic Font 1" is it possible to load that font with jquery? That way I can offer a bunch of fonts without loading them all when the page loads. Also I was hoping to use google web fonts, but not a must. Just for clarity, I am currently using a couple of custom fonts and they load just fine.

Once again, Thank you... Todd

Answer 1

Here's a function I wrote recently for adding Google web fonts dynamically...

function addGoogleFont(FontName) {
    $("head").append("<link href='https://fonts.googleapis.com/css?family=" + FontName + "' rel='stylesheet' type='text/css'>");
}

addGoogleFont("Junge"); // for example

After that you just apply the font via font-family as you normally would.