Styled unicode arrows not showing up with Google Fonts web font

Question

I am trying to use the font Source Code Pro on a webpage, alongside with the gorgeous arrows visible in its specimen page.

I'm including the font on my page using Google Fonts, which doesn't list the arrows on its respective page. But if you copy/paste some arrows into it from the specimen page or htmlarrows.com they show up looking like I expect.

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).

Here is an example:

@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;
}

<table class="container">
  <thead>
    <tr>
      <th>font-family</th>
      <th>A</th>
      <th>Left</th>
      <th>Right</th>
    </tr>
  </thead>
  <tbody>
    <tr class="row-sans-serif">
      <th>sans-serif</th>
      <td>A</td>
      <td>&#8592;</td>
      <td>&#8594;</td>
    </tr>
    <tr class="row-source-code-pro">
      <th>Source Code Pro</th>
      <td>A</td>
      <td>&#8592;</td>
      <td>&#8594;</td>
    </tr>
  </tbody>
</table>

When I add the font to my bundle on the Google Fonts site it allows me to import the Latin version or the Latin Extended version, switching over to the extended version doesn't seem to change anything for my use case.

I've tried changing how I import the font from @import to <link>, I've tried changing how I reference the unicode character to ← or ←, nothing seems to do the trick.

Answer 1

If you load the URL that's being imported for the font: https://fonts.googleapis.com/css?family=Source+Code+Pro you'll see that the @font-faces being defined have unicode-range set. This range doesn't include U+02190-U+02199, which is where the arrows reside.

This is Google optimizing their API. The documentation states that there is an optional subset parameter you can pass to get more than the base ranges. This is the same attribute the Google Fonts generator adds to the URL when you check the Latin extended checkbox.

I can't find any defined subset that returns the unicode range for arrows. But, there is another optional parameter listed in the documentation called text. text only return a @font-face that can handle the specific characters passed through.

Since text limits to just those, I haven't found a way to get Google Fonts to return the basic Latin characters alongside the arrows. This seems to be something lacking in the Google Fonts API, or not well documented if it already exists.

As a work-around, you can double up on the imports and add a second one just for text=←|→ (but url encoding the characters first). Note that this isn't great since it's adding another whole round-trip just for two glyphs.

An example:

@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');
@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro&text=%E2%86%90|%E2%86%92');

.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', monospace;
}

<table class="container">
  <thead>
    <tr>
      <th>font-family</th>
      <th>A</th>
      <th>Left</th>
      <th>Right</th>
    </tr>
  </thead>
  <tbody>
    <tr class="row-sans">
      <th>sans-serif</th>
      <td>A</td>
      <td>&#8592;</td>
      <td>&#8594;</td>
    </tr>
    <tr class="row-source-code-pro">
      <th>Source Code Pro</th>
      <td>A</td>
      <td>&#8592;</td>
      <td>&#8594;</td>
    </tr>
  </tbody>
</table>

Alternatively, in my specific use case the same font is supplied through Adobe's Typekit. Embedding the web font using Typekit works fine.