Why aren't my google fonts working?

:Harlowe: Harlowe 3

This is my first ever post on Reddit, so please let me know if I mess up any potential social etiquette or unofficial rules that I am unaware of. I've only ever read posts and have barely been on the app/website itself.

So I'm pretty new to Twine. I have no background in coding whatsoever. I've been working on a passion project, starting out with finding fonts. That's where my issue is coming in.

I've figured out how to import Google Fonts. Most of my fonts are working except one: "Press Start 2P". I created a new game to test if it worked on its own, and it did. But when I added two others, the font always defaulted to another.

What happened exactly was I had three fonts: "Press Start 2P", "Special Elite", and "Sixtyfour". When all three were together, the piece of text I wanted to be in "Press Start 2P" was in "Special Elite" instead. They both used the "system-ui" extra-font-type-whatever(?), so I thought that was the issue, but when I removed "Special Elite", the text turned into "Sixtyfour", which used "sans-serif".

(I had this issue with a different font "Jacquarda Bastarda 9" and "Jacquard 12" when paired with the font "Bytesized". They were both fixed when "Bytesized" was removed.)

The thing is, for my game, I really want to have "Press Start 2P" and "Sixtyfour" as fonts. "Special Elite" would be preferable, but not necessary. Can anyone tell me what's wrong?

This is my stylesheet setup:

@ import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Sixtyfour:BLED,SCAN@23, -49&display=swap');

tw-story {
font-family: 'Press Start 2P', system-ui;
font-weight: 400;
font-style: normal;
}

tw-story {
font-family: 'Sixtyfour', sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-variation-serrings:
'BLED' 23,
'SCAN' -49;
}

I'm using Harlowe, I'm pretty sure.

Posted Jun 3, 2026, 11:51 AM UTC

42
Loading comments…