CODEWITHSUNDEEP
unicodewebfontsgoogle-webfonts
davecave
davecave

Reputation: 4818

Inaccessible glyphs and symbols in Google Fonts

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.

piazzolla image

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

<div></div>

(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!

Upvotes: 3

Views: 1247

Answers (1)

Dave Crossland
Dave Crossland

Reputation: 141

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.

<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono|IBM+Plex+Sans|IBM+Plex+Sans+Condensed|IBM+Plex+Serif&text=%E2%86%B3" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono|IBM+Plex+Sans|IBM+Plex+Sans+Condensed|IBM+Plex+Serif" rel="stylesheet">

Upvotes: 5

Related Questions