diff --git a/js/Kbps.jsx b/js/Kbps.jsx
new file mode 100644
index 00000000..1b8dde37
--- /dev/null
+++ b/js/Kbps.jsx
@@ -0,0 +1,16 @@
+// Single line text display that can animate and hold multiple registers
+import React from 'react';
+import {connect} from 'react-redux';
+
+import CharacterString from './CharacterString.jsx';
+
+
+class Kbps extends React.Component {
+  render() {
+    return <CharacterString id='kbps'>
+      {this.props.kbps}
+    </CharacterString>;
+  }
+}
+
+module.exports = connect(state => state.media)(Kbps);
diff --git a/js/Khz.jsx b/js/Khz.jsx
new file mode 100644
index 00000000..3663a6bd
--- /dev/null
+++ b/js/Khz.jsx
@@ -0,0 +1,16 @@
+// Single line text display that can animate and hold multiple registers
+import React from 'react';
+import {connect} from 'react-redux';
+
+import CharacterString from './CharacterString.jsx';
+
+
+class Khz extends React.Component {
+  render() {
+    return <CharacterString id='khz'>
+      {this.props.khz}
+    </CharacterString>;
+  }
+}
+
+module.exports = connect(state => state.media)(Khz);
diff --git a/js/font.js b/js/font.js
deleted file mode 100644
index 0019ada7..00000000
--- a/js/font.js
+++ /dev/null
@@ -1,28 +0,0 @@
-// Manage rendering text from this skin's text.bmp file
-module.exports = function() {
-
-  // Fill a node with a <div> containing character <div>s
-  this.setNodeToString = function(node, string) {
-    var stringElement = document.createElement('div');
-    for (var i = 0, len = string.length; i < len; i++) {
-      var char = string[i].toLowerCase();
-      stringElement.appendChild(this.characterNode(char));
-    }
-    node.innerHTML = '';
-    node.appendChild(stringElement);
-  };
-
-  // Get a <div> containing char
-  this.characterNode = function(char) {
-    return this.displayCharacterInNode(char, document.createElement('div'));
-  };
-
-  // Style/populate a <div> to display a character
-  this.displayCharacterInNode = function(character, node) {
-    character = character.toString();
-    var className = 'character-' + character.charCodeAt(0);
-    node.classList.add('character');
-    node.classList.add(className);
-    return node;
-  };
-};
diff --git a/js/main-window-dom.js b/js/main-window-dom.js
index c715e1f1..fddbe670 100644
--- a/js/main-window-dom.js
+++ b/js/main-window-dom.js
@@ -45,8 +45,8 @@ module.exports = el('div', {id: 'main-window', class: 'loading stop'}, [
   ]),
   el('div', {class: 'media-info'}, [
     el('div', {id: 'song-title', class: 'text'}),
-    el('div', {id: 'kbps'}),
-    el('div', {id: 'khz'}),
+    el('div', {id: 'kbps-holder'}),
+    el('div', {id: 'khz-holder'}),
     el('div', {class: 'mono-stereo'}, [
       el('div', {id: 'mono'}),
       el('div', {id: 'stereo'})
diff --git a/js/main-window.js b/js/main-window.js
index 85026f17..f3f5d1c4 100644
--- a/js/main-window.js
+++ b/js/main-window.js
@@ -3,6 +3,8 @@ import Marquee from './Marquee.jsx';
 import Actions from './Actions.jsx';
 import Time from './Time.jsx';
 import ShadeTime from './ShadeTime.jsx';
+import Kbps from './Kbps.jsx';
+import Khz from './Khz.jsx';
 
 import '../css/main-window.css';
 
@@ -22,8 +24,6 @@ module.exports = {
       repeat: document.getElementById('repeat'),
       shuffle: document.getElementById('shuffle'),
       volume: document.getElementById('volume'),
-      kbps: document.getElementById('kbps'),
-      khz: document.getElementById('khz'),
       mono: document.getElementById('mono'),
       stereo: document.getElementById('stereo'),
       balance: document.getElementById('balance'),
@@ -39,6 +39,8 @@ module.exports = {
     this.winamp.renderTo(<Actions />, document.getElementById('actions-holder'));
     this.winamp.renderTo(<Time />, document.getElementById('time-holder'));
     this.winamp.renderTo(<ShadeTime />, document.getElementById('shade-time-holder'));
+    this.winamp.renderTo(<Kbps />, document.getElementById('kbps-holder'));
+    this.winamp.renderTo(<Khz />, document.getElementById('khz-holder'));
 
     this._registerListeners();
     return this;
diff --git a/js/reducers.js b/js/reducers.js
index cf8500d0..327a7abd 100644
--- a/js/reducers.js
+++ b/js/reducers.js
@@ -79,7 +79,9 @@ const media = (state, action) => {
     return {
       timeMode: 'ELAPSED',
       timeElapsed: 0,
-      length: null
+      length: null,
+      kbps: null,
+      khz: null
     };
   }
   switch (action.type) {
@@ -90,6 +92,10 @@ const media = (state, action) => {
       return Object.assign({}, state, {timeElapsed: action.elapsed});
     case 'SET_MEDIA_LENGTH':
       return Object.assign({}, state, {length: action.length});
+    case 'SET_MEDIA_KBPS':
+      return Object.assign({}, state, {kbps: action.kbps});
+    case 'SET_MEDIA_KHZ':
+      return Object.assign({}, state, {khz: action.khz});
     default:
       return state;
   }
diff --git a/js/skin.js b/js/skin.js
index 80df7c69..9cc62f03 100644
--- a/js/skin.js
+++ b/js/skin.js
@@ -1,11 +1,9 @@
 // Dynamically set the css background images for all the sprites
 import SKIN_SPRITES from './skin-sprites';
-import Font from './font';
 import Visualizer from './visualizer';
 import JSZip from '../node_modules/jszip/dist/jszip'; // Hack
 
 module.exports = {
-  font: new Font(),
   init: function(visualizerNode, analyser) {
     this._createNewStyleNode();
     this.visualizer = Visualizer.init(visualizerNode, analyser);
diff --git a/js/winamp.js b/js/winamp.js
index 5e05f70c..f3e7d3ff 100755
--- a/js/winamp.js
+++ b/js/winamp.js
@@ -256,8 +256,8 @@ module.exports = {
     function setMetaData() {
       var kbps = '128';
       var khz = Math.round(this.media.sampleRate() / 1000).toString();
-      this.skin.font.setNodeToString(document.getElementById('kbps'), kbps);
-      this.skin.font.setNodeToString(document.getElementById('khz'), khz);
+      this.dispatch({type: 'SET_MEDIA_KBPS', kbps: kbps});
+      this.dispatch({type: 'SET_MEDIA_KHZ', khz: khz});
       window.dispatchEvent(this.events.channelCountUpdated);
       window.dispatchEvent(this.events.titleUpdated);
       window.dispatchEvent(this.events.timeUpdated);