Spark: the font for sparklines

Taking the Atf Spark font for sparklines for a spin, showing the 6 varieties (~~the dotline seems a bit buggy~~ the dotline works only for numbers 1:9 for now).

Repo

Tutorial by Paul Bradshaw

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Spark font example</title>
      <link href="https://fonts.googleapis.com/css?family=Encode+Sans+Expanded" rel="stylesheet">
      <style>
        @font-face {
          font-family: spark-bar-medium;
          src: url(https://cdn.rawgit.com/aftertheflood/spark/ec03b3fd/Output/Webfonts/Bar%20-%20medium/spark-bar-medium.woff);
          font-variant-ligatures: contextual;
          -moz-font-feature-settings: "calt";
          -webkit-font-feature-settings: "calt";
          font-feature-settings: "calt";
        }

@font-face {
            font-family: spark-bar-thin;
            src: url(https://cdn.rawgit.com/aftertheflood/spark/ec03b3fd/Output/Webfonts/Bar%20-%20thin/spark-bar-thin.woff);
            font-variant-ligatures: contextual;
            -moz-font-feature-settings: "calt";
            -webkit-font-feature-settings: "calt";
            font-feature-settings: "calt";
          }
      
        @font-face {
            font-family: spark-bar-narrow;
            src: url(https://cdn.rawgit.com/aftertheflood/spark/ec03b3fd/Output/Webfonts/Bar%20-%20narrow/spark-bar-narrow.woff);
            font-variant-ligatures: contextual;
            -moz-font-feature-settings: "calt";
            -webkit-font-feature-settings: "calt";
            font-feature-settings: "calt";
          }
      
        @font-face {
            font-family: spark-dot-medium;
            src: url(https://cdn.rawgit.com/aftertheflood/spark/ec03b3fd/Output/Webfonts/Dots%20-%20medium/spark-dot-medium.woff);
            font-variant-ligatures: contextual;
            -moz-font-feature-settings: "calt";
            -webkit-font-feature-settings: "calt";
            font-feature-settings: "calt";
          }
      
        @font-face {
            font-family: spark-dot-small;
            src: url(https://cdn.rawgit.com/aftertheflood/spark/ec03b3fd/Output/Webfonts/Dots%20-%20small/spark-dot-small.woff);
            font-variant-ligatures: contextual;
            -moz-font-feature-settings: "calt";
            -webkit-font-feature-settings: "calt";
            font-feature-settings: "calt";
          }
      
        @font-face {
            font-family: spark-dotline-medium;
            src: url(https://cdn.rawgit.com/aftertheflood/spark/ec03b3fd/Output/Webfonts/Dotline%20-%20medium/spark-dotline-medium.woff);
            font-variant-ligatures: contextual;
            -moz-font-feature-settings: "calt";
            -webkit-font-feature-settings: "calt";
            font-feature-settings: "calt";
          }
      
        span.spark {
            font-size: 24px;
            color: red;
            background-color: #f2f2f2;
            padding-left: 3px;
            padding-right: 3px;
        }

span.barchart-medium {
          font-family: spark-bar-medium;
        }
        span.barchart-narrow {
            font-family: spark-bar-narrow;
          }
        span.barchart-thin {
            font-family: spark-bar-thin;
          }
        span.dot-medium {
            font-family: spark-dot-medium;
          }
        span.dot-small {
            font-family: spark-dot-small;
          }
        span.dotline-medium {
            font-family: spark-dotline-medium;
          }
      
        p, h1, h2 {
            font-family: 'Encode Sans Expanded', sans-serif;
            width: 700px;
            margin: auto;
            margin-bottom: 20px;
            line-height: 200%;   
        }
      </style>
      
</head>
<body>
  <h1>Spark: the font for sparklines</h1>
  <h2>bar-medium</h2>
  <p>There were 70 Airprox reports involving drones coming close to aircraft over the UK in 2016 - compared to 29 in 2015 and just 6 in 2014. There were no incidents at all between 2011 and 2013: <span class="spark barchart-medium">4 {4,0,54,0,6,29,70} 70</span>. There have been 33 incidents up to May 2017. </p>
  <h2>bar-thin</h2>
  <p>There were 70 Airprox reports involving drones coming close to aircraft over the UK in 2016 - compared to 29 in 2015 and just 6 in 2014. There were no incidents at all between 2011 and 2013: <span class="spark barchart-thin">4 {4,0,54,0,6,29,70} 70</span>. There have been 33 incidents up to May 2017.</p>
  <h2>bar-narrow</h2>
  <p>There were 70 Airprox reports involving drones coming close to aircraft over the UK in 2016 - compared to 29 in 2015 and just 6 in 2014. There were no incidents at all between 2011 and 2013: <span class="spark barchart-narrow">4 {4,0,54,0,6,29,70} 70</span>. There have been 33 incidents up to May 2017. </p>
  <h2>dot-medium</h2>
  <p>There were 70 Airprox reports involving drones coming close to aircraft over the UK in 2016 - compared to 29 in 2015 and just 6 in 2014. There were no incidents at all between 2011 and 2013: <span class="spark dot-medium">4 {4,0,54,0,6,29,70} 70</span>. There have been 33 incidents up to May 2017. </p>
  <h2>dot-small</h2>
  <p>There were 70 Airprox reports involving drones coming close to aircraft over the UK in 2016 - compared to 29 in 2015 and just 6 in 2014. There were no incidents at all between 2011 and 2013: <span class="spark dot-small">4 {4,0,54,0,6,29,70} 70</span>. There have been 33 incidents up to May 2017.</p>
  <h2>dotline-medium</h2>
  <p>There were 70 Airprox reports involving drones coming close to aircraft over the UK in 2016 - compared to 29 in 2015 and just 6 in 2014. There were no incidents at all between 2011 and 2013: <span class="spark dotline-medium">4 {4,2,5,9,6,3,7} 7</span>. There have been 33 incidents up to May 2017. </p>
</body>
</html>