Cambiar fuente para el texto seleccionado usando JavaScript

¿Cómo puedo cambiar la fuente cuando destaco un texto específico de div? El código siguiente cambia la fuente de todo el texto cuando selecciono una fuente de mi dropbox.

function changeFont(font) { document.getElementById("note_header").style.fontFamily = font.value; } 
 Highlight text and change font 
Arial Sans Serif Comic Sans MS Times New Roman Courier New Verdana Trebuchet MS Arial Black Impact Bookman Garamond Palatino Georgia
Some Content

Intentando mejorar la respuesta de Ankit,
Aquí hay una solución que no usa la función replace() .

El problema con la solución de Ankit es que la primera ocurrencia de un texto seleccionado fue reemplazada en caso de que se repita un texto.
Por ejemplo, cuando el texto es “abc abc” y seleccionamos el segundo, ese fue el primero que cambió su fuente.

⋅ ⋅ ⋅

El siguiente fragmento crea un nuevo elemento html con el texto seleccionado y la fuente elegida, luego elimina la selección e inserta el nuevo elemento en su lugar:
(Ver comentarios en el código)

 function changeFont(font) { var sel = window.getSelection(); // Gets selection if (sel.rangeCount) { // Creates a new element, and insert the selected text with the chosen font inside var e = document.createElement('span'); e.style = 'font-family:' + font.value + ';'; e.innerHTML = sel.toString(); // https://developer.mozilla.org/en-US/docs/Web/API/Selection/getRangeAt var range = sel.getRangeAt(0); range.deleteContents(); // Deletes selected text… range.insertNode(e); // … and inserts the new element at its place } } 
 .editable { width: 360px; height: 120px; border: 1px solid #ccc } 
 Highlight text and change font 
Some Content

Necesita usar window.getSelection() para obtener el texto seleccionado del div y ya que está dispuesto a cambiar el texto resaltado para que pueda rodear el texto resaltado con el elemento y luego aplicar el CSS de la font-family al . Este elemento mantendrá el texto resaltado para que la font-family se modifique únicamente a este texto resaltado.

 function changeFont(font) { var selectedText = ""; if (window.getSelection) { selectedText = window.getSelection().toString(); var newContent = $('#note_header').html().replace(selectedText, ''+selectedText+''); $('#note_header').html(newContent); } } 
  Highlight text and change font 
Some Content

Puedes intentar esto:

 function changeFont(font) { document.getElementById("note_header").style.fontFamily= font.value; document.getElementById("select_font").setAttribute( "style", "border: 1px solid red; outline: none"); } 
  
Some Content