Renaming A Font And Overlaying
I wanted to use two fonts, overlaying each other so I could get a white font with black outline. Doing so makes the text pop when placed on a colored background. The fonts originally came from two separate files, but when they are imported into Font Book, they are combined under the same name, with the secondary names respectively "Regular" and "Burn". My browser can't distinguish between the two secondary names and instead, is fixed on the primary name, essentially randomly picking a font from one of the secondary names.
Snippet from a decompressed TTF font file:
To achieve more granular control, I first considered CSS configuration, but that produced no luck. I did find, however, some instructions on how to use a command line, python script for uncompressing TTF files as TTX, creating a new primary name and then converting back to TTF again. Once imported, I could then use both fonts in my browser.
Changing the font name:
Note: Obviously, this is only significant for local development and rendering. I'm using the browser to generate images that I will be using for an online card game.