Creating a collection of fonts
I want to update the design of this website by customising the typography and styles. There are a lot of very good openly-licensed fonts available which I would like to experiment with and start using. Some recent favourite resources include Velvetyne and this selection by Guy Moorehouse.
This website is built with Observable Framework and is currently using the default styles and typography. For various technical reasons it is not currently possible to host the font-files locally in Framework, which initially put up a roadblock for experimentation. It is possible to load remote CSS and web fonts though. One solution would be to import the fonts directly from a service like Google Fonts which is what the default Framework theme does. However, if I want to use a font that is not available on Google Fonts, then I need another solution.
I decided to build my own font-serving site that now lives at fonts.jamesking.io.
The site has a few purposes:
- Act as a way of bookmarking fonts that I find beautiful or interesting
- Provide a specimen for each font and variant, with adjustable sizing
- Host and serve the CSS and web-font files for use in web projects like this site
This new site is built using a static-site generator pattern which I vibe-coded with Claude Code. I can add new fonts by committing them to the project repository, along with a CSS file that declares the @font-face styles.
The quotes used for the type-specimens were inspired by this.