CODEWITHSUNDEEP
jqueryhtmlfonts
maddogandnoriko
maddogandnoriko

Reputation: 1002

dynamically load fonts html jquery

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

Upvotes: 4

Views: 9905

Answers (1)

Reinstate Monica Cellio
Reinstate Monica Cellio

Reputation: 26163

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.

Upvotes: 22

Related Questions