A Pen by John Motyl Jr.

index.html

<a href="http://www.dafont.com/monofur.font" class="download-link" target="_blank">font source</a>
<img src="http://johnmotyljr.com/codepen/programming-fonts/font-image.png"/>
<br>
<img src="http://johnmotyljr.com/codepen/programming-fonts/in-chrome.png"/>
<pre class="prettyprint linenums"><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
   &lt;title&gt;Site Title&lt;/title&gt;
   &lt;meta http-equiv="Content-Type" content="text/html;charset=utf-8"&gt;
   &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
   &lt;link rel="stylesheet" href="styles/stylesheet.css"&gt;
   &lt;link rel="shortcut icon" href="favicon.ico"&gt;
   &lt;link rel="apple-touch-icon" href="apple-touch-icon.png"&gt;
   &lt;meta name="msapplication-TileColor" content="#f6f6f6"&gt;
   &lt;meta name="msapplication-TileImage" content="favicon.ico"&gt;
&lt;/head&gt;

&lt;body&gt;
   &lt;div id="js-wrapper"&gt;
      &lt;header class="site-header"&gt;
         &lt;nav&gt;
            &lt;a href="#"&gt;link #1&lt;/a&gt;
            &lt;a href="#"&gt;link #2&lt;/a&gt;
            &lt;a href="#"&gt;link #3&lt;/a&gt;
            &lt;a href="#"&gt;link #4&lt;/a&gt;
            &lt;a href="#"&gt;link #5&lt;/a&gt;
         &lt;/nav&gt;
      &lt;/header&gt;

      &lt;section class="site-content"&gt;
         &lt;h1&gt;introduction&lt;/h1&gt;
      &lt;/section&gt;

      &lt;footer class="site-footer"&gt;
         copyright 2013 company
      &lt;/footer&gt;

   &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>

my-favorite-coding-font-(view-in-chrome).markdown

my favorite coding font (view in chrome)

The font is called monofur and you can find it here: {{ http://www.dafont.com/monofur.font }}. Also, it is free but please read the text doc to see if any limitations or restrictions apply.

A Pen by John Motyl Jr on CodePen.

License.

script.js

$(function () {
    prettyPrint();
    $('ol li').hover(
    function () {
        $(this).css('zoom', '110%');
    }, function () {
        $(this).css('zoom', '100%');
    });
});

style.css

@font-face {
    font-family: 'monofurregular';
    src: url('http://johnmotyljr.com/codepen/programming-fonts/monof55-webfont.eot');
    src: url('http://johnmotyljr.com/codepen/programming-fonts/monof55-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://johnmotyljr.com/codepen/programming-fonts/monof55-webfont.woff') format('woff'),
         url('http://johnmotyljr.com/codepen/programming-fonts/monof55-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'monofur__italic';
    src: url('http://johnmotyljr.com/codepen/programming-fonts/monof56-webfont.eot');
    src: url('http://johnmotyljr.com/codepen/programming-fonts/monof56-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://johnmotyljr.com/codepen/programming-fonts/monof56-webfont.woff') format('woff'),
         url('http://johnmotyljr.com/codepen/programming-fonts/monof56-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'monofurregular';
        src: url('http://johnmotyljr.com/codepen/programming-fonts/monof55-webfont.svg#monofurregular') format('svg');
    }
    @font-face {
        font-family: 'monofur__italic';
        src: url('http://johnmotyljr.com/codepen/programming-fonts/monof56-webfont.svg#monofur__italic') format('svg');
    }
}

body {
  background: #222;
  padding: 20px 50px;
}

pre {
}

code {
    font:normal normal 1.2em/1.2 'monofurregular', 'monaco', 'inconsolata', 'consolas';
    color: #f8f8f8;
}

.italic {
    font:normal normal 20px/1.2 'monofur__italic';
}

a {
  color: #222;
  text-decoration: none;
}

.pun, .opn, .clo {
    color: #a87b60;
}
.tag {
    color: #a87b60;
}
.atn {
    color: #60827e;
}
.atv {
    color: #5b8390;
}
.dec, .var {
    color: #676767;
}

/* Specify class=linenums on a pre to get line numbering */
ol.linenums {
  margin-top: 0;
  margin-bottom: 0;
}

ol.linenums li:hover {
  background: #2E2E2E;
  border: 1px solid #151415;
  border-left: 4px solid #151415;
}

/* IE indents via margin-left */
li.L0,
li.L1,
li.L2,
li.L3,
li.L4,
li.L5,
li.L6,
li.L7,
li.L8,
li.L9 {
  /* */
}

/* Alternate shading for lines */
li.L1,
li.L3,
li.L5,
li.L7,
li.L9 {
  /* */
  background: rgb(34,34,36);
}

.download-link {
  position: absolute;
  display: block;
  top: 20px;
  right: 50px;
  background: #5b8390;
  color: #333;
  padding: 12px 18px;
  font:normal normal 20px/1.2 sans-serif;
  border-radius: 4px;
  box-shadow: 0 0 0 1px #406C7A;
  text-transform: uppercase;
  -webkit-transition: background 200ms ease-in-out, color 200ms ease-in-out;
  -moz-transition: background 200ms ease-in-out, color 200ms ease-in-out;
  transition: background 200ms ease-in-out, color 200ms ease-in-out;
}

.download-link:hover {
  background: #a87b60;
  color: #151415;
}