title: Styled unicode arrows not showing up with Google Fonts web font
body: <p>I am trying to use the font Source Code Pro on a webpage, alongside with the gorgeous arrows visible in its <a href="http://adobe-fonts.github.io/source-code-pro/" rel="nofollow noreferrer">specimen page</a>.</p>
  
  <p>I'm including the font on my page using Google Fonts, which doesn't list the arrows on <a href="https://fonts.google.com/specimen/Source+Code+Pro" rel="nofollow noreferrer">its respective page</a>. But if you copy/paste some arrows into it from the specimen page or <a href="http://htmlarrows.com/" rel="nofollow noreferrer">htmlarrows.com</a> they show up looking like I expect.</p>
  
  <p>When I use the font as Google Fonts tells me to use it on my webpage, all the other text becomes Source Code Pro but the arrows default back to the system default font (Arial for me).</p>
  
  <p>Here is an example:</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-css lang-css prettyprint-override"><code>@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');
  
  .container {
    border-collapse: collapse;
  }
  
  td {
    font-size: 96px;
  }
  
  td, th {
    border: 0.1rem solid #c3c3c3;
    padding: 0.5rem;
  }
  
  .row-sans-serif {
    font-family: sans-serif;
  }
  
  .row-source-code-pro {
    font-family: 'Source Code Pro', sans-serif;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table class="container"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;font-family&lt;/th&gt;
        &lt;th&gt;A&lt;/th&gt;
        &lt;th&gt;Left&lt;/th&gt;
        &lt;th&gt;Right&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr class="row-sans-serif"&gt;
        &lt;th&gt;sans-serif&lt;/th&gt;
        &lt;td&gt;A&lt;/td&gt;
        &lt;td&gt;&amp;#8592;&lt;/td&gt;
        &lt;td&gt;&amp;#8594;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="row-source-code-pro"&gt;
        &lt;th&gt;Source Code Pro&lt;/th&gt;
        &lt;td&gt;A&lt;/td&gt;
        &lt;td&gt;&amp;#8592;&lt;/td&gt;
        &lt;td&gt;&amp;#8594;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When I add the font to my bundle on the Google Fonts site it allows me to import the <code>Latin</code> version or the <code>Latin Extended</code> version, switching over to the extended version doesn't seem to change anything for my use case.</p>
  
  <p>I've tried changing how I import the font from <code>@import</code> to <code>&lt;link&gt;</code>, I've tried changing how I reference the unicode character to <code>&amp;larr;</code> or <code>&amp;#x2190;</code>, nothing seems to do the trick.</p>