Can I build a font-picker using fontsource?

[jsefiani]

Hi all, I would like to build a performant font-picker, do you think I can leverage fontsource for something like this?

The goal is to have a dropdown that loads a list of fonts that a user can choose from to customize the look and feel of the app, the selected font is then stored in the database and when the app renders I need to display all text in the choosen font.

How would I go about it when I use fontsource?

[ayuhito]

I think you'd be able to leverage the jsDelivr CDN to fetch specific font files and other metadata like FONTLIST.json from NPM and the GitHub repo.

I'm also rolling the existing Fontsource API server implementation into our upcoming beta website so maybe you could reference off this branch to see how I fetch all the relevant metadata.

Technically you can also use the Fontsource API to query specific metadata too, although it's a teensy bit flaky atm. New upcoming implementation would be clustered and has multiple levels of redundancy using LiteFS.

[bstro]

@ayuhito I am also curious about this kind of thing. The FONTLIST.json link above seems to 404, and i'm wondering where to find that these days.

[ayuhito]

@ayuhito I am also curious about this kind of thing. The FONTLIST.json link above seems to 404, and i'm wondering where to find that these days.

I would recommend using the Fontsource API which has been migrated to use Cloudflare Workers and should be very stable for production. I'm planning on adding a lot more features and documentation in the upcoming months (when I free up in a couple weeks) for the API as that will be my primary focus. Tracking a file in a repository is not guaranteed after all, but the API should never change.

[tmikaeld]

@ayuhito Picking up from sub-sets needing combinations (latin + latin-ext).

We did just this, build out own font-picker and font-loader based on https://github.com/fontsource/font-files
(I'm using the metadata/fontsource.json file to create the font-picker)

Edit: I figured it out. So only latin/western languages need latin as the base.

[ayuhito]

I would also recommend you checkout the existing CSS files generated by our packager to help understand how different subsets are layered upon each other. 👍

[tmikaeld]

Thanks! Is there any docs on the variation variable fonts?

{  "variable": {
      "ital": {
        "default": "0",
        "min": "0",
        "max": "1",
        "step": "1"
      },
      "wdth": {
        "default": "100",
        "min": "75",
        "max": "125",
        "step": "0.1"
      },
      "wght": {
        "default": "400",
        "min": "100",
        "max": "900",
        "step": "1"
      }
    }
 }

[ayuhito]

You can learn more about what those values mean here: https://fonts.google.com/variablefonts

[tmikaeld]

Thanks, looks really powerful, this new way of using fonts and seem to have 97% browser support.

From what I can gather, it should be sufficient to just load the index.css file when using variable fonts.