Caricamento dinamico del carattere Web

Question

Sono nuovo per questo elemento di carattere Web. Capisco che un certo tipo di carattere possa essere scaricato da un URL e utilizzato in una pagina web.

La mia domanda è: è possibile caricare un carattere Web in modo dinamico a seconda dell'input dell'utente? Semplicemente lo scenario: l'utente digita un testo nel campo di testo e seleziona il nome di un font che era non ancora caricato. Alcuni codici javascript vengono attivati ​​per caricare dinamicamente una risorsa di carattere Web. È possibile?

Answer 1

Prova questo (per i font web di Google):

<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/

Questo codice è bassed su questo post: http://amirush.blogspot.ro/2013/07/dynamic-loading-of-web-fonts.html

È anche possibile utilizzare una delle risposte esistenti: Load external font with javascript and jquery o dynamically load fonts html jquery