Inaccessible glyphs and symbols in Google Fonts

Question

Some glyphs that are shown on the Google Fonts specimen sheet are not available once the font is implemented on a site.

For example, look at this preview for Piazzolla:

https://fonts.google.com/specimen/Piazzolla?preview.text=piazzolla%20%E2%84%A6%E2%86%92%E2%86%92%E2%86%97%E2%86%97&preview.text_type=custom&query=piazzolla#standard-styles

Notice how the arrows are using the custom glyph provided by the font.

Then, compare that to this codepen that uses the same font, but the arrows are not using the same glyph.

(random code block to appease stackoverflow because there is no code that needs to be embedded in the question.)

This leads me to believe that Google is not serving up the entire font, and there might be a way to have access to more characters.

Any help would be greatly appreciated. Thanks!

user_16791246 · Answer

The GF API has an advanced feature for this, but you have to closely read the manual (https://developers.google.com/fonts/docs/getting_started) and know how to use the API to do what you want.

Here's a working demo using the arrows in IBM Plex:

https://jsbin.com/neheyuxira/2/edit?html,output

And a fork of your page with the same technique applied

https://codepen.io/davelab6/pen/bGRpJQP

The trick is to add a API URL first that uses the text API feature to specify the unicodes you want (URL encoded, eg with https://r12a.github.io/app-encodings), and then the regular API URL.

Inaccessible glyphs and symbols in Google Fonts

1 Answers