constructURL constructs invalid URLs for custom variable font axes

[tec27]

Example:

const ICON_FONT_URL = constructURL({
  families: {
    'Material Symbols Outlined': {
      opsz: '20..48',
      FILL: '0..1',
      GRAD: '-25..0',
    },
  },
  display: 'block',
})

Expected URL: https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,FILL,[email protected],0..1,-25..0&display=block
Actual URL: https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL,GRAD,[email protected],-25..0,20..48&display=block

This generated URL gets a 400 response from the API:

400: Invalid selector

Axes must be listed alphabetically (e.g. a,b,c,A,B,C)

Material Symbols Outlined:FILL,GRAD,[email protected],-25..0,20..48

It seems like when sorting here, it should be doing a custom sort that puts lowercase letters first rather than doing localeCompare (and I would say that generally localeCompare is probably not the right thing to be using for this API, as you'll get weirdness in locales that e.g. sort ch to be next to h, and make the generated URLs environment-dependent).

Judging from https://learn.microsoft.com/en-us/typography/opentype/spec/dvaraxisreg#syntactic-requirements-for-design-variation-axis-tags there are pretty strict rules for axis tags (they must be 4 bytes and fall within a..z|A..Z|0..9| and it seems like the google API expects these to be sorted in lowercase,uppercase,digits,space order, although I'm not 100% sure about the digits or space.

I can try to write a PR with a custom sort function for these if that sounds good to you (or you can feel free to do it yourself if you would like! :) )