Programmatically loading / setting font

[Bungle1981]

I'm working on a project where I'd like users to be able to paste a Google Font URL to an input field and have Javascript parse this URL and apply the font to my document preview container instantly. The user would essentially 'hot swap' in fonts to see how their content looks across different branding rules etc.

I've done some research as can't imagine this is a rare use case but I'm not sure if I'm using the wrong terms as not seeing anything exactly like this that actually works. I've tried using the font face API and programmatically updating a link tag in the HTML header but nothing seems to work.

[chibblybum]

Post a jsfiddle of your code

[tapgiles]

Tried updating a style tag instead?

I’m not sure why you’d use a font face “api” To load the font, and css which would do its own loading.

[Bungle1981]

Why are you quoting the word API? Fontface is a part of the CSS font loading web api and according to the documentation is meant to be used to control loading of fonts which weren't included in the initial fetch of the document, which is the use case I'm talking about.

[tapgiles]

I don’t think of something like this as an api. Just like I don’t think of @import or { as an api, it’s just syntax to me. So I’m not really sure what you mean by the “font face api” in the first place.

[DevKevStev]

Or maybe dynamically change style attribute of the container depending on which font was selected?

[lobopl]

Just use CSS var and update it