CODEWITHSUNDEEP
cssfontsgoogle-webfonts
jbustamovej
jbustamovej

Reputation: 589

How to subset a Google icon font for optimal dowload size?

Google contains instructions for how to subset a font, and even specifies:

This feature also works for international fonts, allowing you to specify UTF-8 characters. For example, ¡Hola! is represented as: https://fonts.googleapis.com/css?family=Inconsolata&text=%c2%a1Hola!.

Each symbol in the Google Material Icons/Symbols fonts has a codepoint, as specified in this SO question.

Is there a way to pass the codepoint values as the value to &text URL parameter, so that I can a download a subset of the Material Symbols font with all the icons that I want to use in my app? For example, the search icon has a codepoint of e8b6. I tried several incantations, including &text=e8b6 and &text=%e8%b6 that didn't download the search icon. Then I found a converter from codepoint to utf-8, which converted e8b6 to some non-printable characters ^H^F. I then passed &text=^H^F and it downloaded the search icon, but it didn't subset the font, i.e. it downloaded the whole font file, rather than a subset of it.

Upvotes: 5

Views: 477

Answers (1)

user24210235
user24210235

Reputation: 11

Use a conversion tool like https://r12a.github.io/app-conversion/ to convert the codepoint from UTF-32 to UTF-8. The UTF-8 representation is what you can put into the google API.

Convert e8b6 (UTF-32) to EE A2 B6 (UTF-8) which encodes to %EE%A2%B6 in the URL. So the final URL is https://fonts.googleapis.com/css?family=Material+Symbols+Outlined&text=%EE%A2%B6

The google API returns the CSS:

@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/l/font?kit=kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOejddmVDpY&skey=b8dc2088854b122f&v=v175) format('woff2');
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

And the Woff2 file can be downloaded and put into tools like FontDrop to verify that it only contains the symbols of interest.

Text conversion :

Text conversion

Upvotes: 1

Related Questions