title: Change font for selected text using JavaScript
body: <p>How can I change the font when I highlight a specific text from the div. The code below changes the font of the whole text when I select a font from my dropbox.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function changeFont(font) {
    document.getElementById("note_header").style.fontFamily = font.value;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>Highlight text and change font &lt;br&gt;
  &lt;select id="select_font" onchange="changeFont(this);"&gt;
              &lt;option value="Arial"&gt;Arial&lt;/option&gt;
              &lt;option value="Sans Serif" selected&gt;Sans Serif&lt;/option&gt;
              &lt;option value="Comic Sans MS"&gt;Comic Sans MS&lt;/option&gt;
              &lt;option value="Times New Roman"&gt;Times New Roman&lt;/option&gt;
              &lt;option value="Courier New"&gt;Courier New&lt;/option&gt;
              &lt;option value="Verdana"&gt;Verdana&lt;/option&gt;
              &lt;option value="Trebuchet MS"&gt;Trebuchet MS&lt;/option&gt;
              &lt;option value="Arial Black"&gt;Arial Black&lt;/option&gt;
              &lt;option value="Impact"&gt;Impact&lt;/option&gt;
              &lt;option value="Bookman"&gt;Bookman&lt;/option&gt;
              &lt;option value="Garamond"&gt;Garamond&lt;/option&gt;
              &lt;option value="Palatino"&gt;Palatino&lt;/option&gt;
              &lt;option value="Georgia"&gt;Georgia&lt;/option&gt;
          &lt;/select&gt;
  &lt;div contenteditable="true" id="note_header" style="width:200px; height:200px; border: 1px solid #ccc"&gt;
    Some Content
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>