Font-Face changing via JavaScript

So the basic workflow is this:

  1. Asynchronous file upload of a font (this is already done).

  2. Get the URL (done).

  3. Change the font to the new URL.

I realize this needs to be done via font-face, but I can't seem to figure out how to access that via JavaScript.

Answers


You can create a new <style> element with the @font-face rule and append it to the document's head:

var newStyle = document.createElement('style');
newStyle.appendChild(document.createTextNode("\
@font-face {\
    font-family: " + yourFontName + ";\
    src: url('" + yourFontURL + "') format('yourFontFormat');\
}\
"));

document.head.appendChild(newStyle);

Of course, you'll probably need to provide all the necessary font formats and URLs, too, unless you're only worried about support for modern desktop browsers (in which case you would just use WOFF – I assume that's reasonable, because of the other features you mentioned).


Define a FontFace object:

new_font = new FontFace('conthrax', 'url(fonts/conthrax-sb.ttf)')

Call its load method to download the font:

new_font.load().then(function(loaded_face) {
    // use font here

}).catch(function(error) {

});

... this returns a Promise, which when resolved passes the loaded FontFace.

Add the loaded font to the document:

new_font.load().then(function(loaded_face) {
    // use font here
    document.fonts.add(loaded_face)
}).catch(function(error) {

});

Use the font as needed (e.g. in Azle):

az.style_text('my_title', 1, {
    "font-family" : "conthrax"
})

Need Your Help

why are function calls in Perl loops so slow?

performance perl

I was writing a file parser in Perl, so had to loop through file. File consists of fixed length records and I wanted to make a separate function that parses given record and call that function in a...

Regex.Match whole words

c# .net regex

In C#, I want to use a regular expression to match any of these words: