Subset fonts based on a string of provided characters by adding characterRange option as sugar on top of unicodeRange

[gingerchew]

Body

Summary

Some fonts are used entirely decoratively, and don't take advantage of all the characters in a font family. This proposal would offer a simpler way to subset those characters without looking up unicode values for those characters.

Background & Motivation

I personally have several clients that like a specific font for their call to actions. Usually these are 1-2 slogans that are used everywhere in their branding, like "Get back to work!" or "We're here to help YOU". While the Fonts API already offers unicodeRange and subsets for trimming characters and languages respectively, listing specific character using the U+NN or the other possible syntaxes available when declaring an @font-face unicode-range isn't very intuitive.

Offering an option like characterRange that accepts a string|string[] of characters would make isolating those characters easier.

I also see this as an addition for after the Fonts API is out of experimental.

Goals

• Create an option such as characterRange as sugar on top of unicodeRange.
• Convert the characters in characterRange into an unicode range and merge into whatever is passed in as unicodeRange.

Non-goals

• Evaluating or parsing the generated site content for characters to generate the character range.

Example

I'll use the experimental setup for now, once that is stable I can come back and update it.

import { defineConfig, fontProviders } from "astro/config";

export default defineConfig({
    experimental: {
        fonts: [{
            provider: fontProviders.google(),
            name: "Roboto",
            cssVariable: "--font-roboto",
+ 			characterRange: 'yourcharactershere'
        }]
    }
});

Then in the appropriate place, add something like:

// dedupe characters
const characterRange = new Set(options.characterRange.split(''));

const convertedChars = [];
for (const char of characterRange) {
	// get char code of each character
	convertedChars.push(`U+${char.charCodeAt(0)}`);
}
// join and use :)
const finalUnicodeRange = [options.unicodeRange, ...convertedChars].join(',');

As an advanced example, using a global data file with catch phrases and slogans, you could get something like this:

import { defineConfig, fontProviders } from "astro/config";
import { slogansArray } from './global.js';

export default defineConfig({
    experimental: {
        fonts: [{
            provider: fontProviders.google(),
            name: "Roboto",
            cssVariable: "--font-roboto",
 			characterRange: slogansArray.join('')
        }]
    }
});

---
import { slogansArray } from '~/global.js';
const randomSlogan = slogansArray[Math.floor(Math.random() * slogansArray.length)];
---
<div class="...">
	{randomSlogan}
</div>

While discussing in the feedback channel of the Discord, @florian-lefebvre also proposed a helper function that works something like this:

import { defineConfig, fontProviders, characterRange } from "astro/config";

export default defineConfig({
    experimental: {
        fonts: [{
            provider: fontProviders.google(),
            name: "Roboto",
            cssVariable: "--font-roboto",
 			unicodeRange: [...characterRange('a-z')]
        }]
    }
});

Which is clean and snazzy as heck, but I think it should still support something like characterRange('arbitrary string with repeated characters') for the simplest user experience.