I recently started playing around with Perchance's custom code and so far it has been a very interesting thing to do. I ran into a little bug(?) wherein I cannot change the font of the buttons, despite the rest being customizable. I have followed the Google Fonts code embedding route, but it didn't seem to work.

My guess is that it is somehow related to my wanting to play around with fonts and use one for the first letter and another one for the rest of the text in the buttons.

Any tips on how to get past it? I am working with https://perchance.org/petrafied-acc AI character chat, and the buttons look like this (standart Perchance font, from what I was able to understand):

As you can see, the custom font that is applied to the main text is different from the one in the buttons

And a snippet of the code:

// Add custom styles for buttons const style = document.createElement('style'); style.textContent = .custom-button { width: 100%; padding: 6px 8px; background: rgba(171, 191, 232, 0.6); color: #fff; border: 0; border-radius: 8px; cursor: pointer; font-family: 'Cinzel Decorative', cursive; font-size: 14px; position: relative; transition: all 0.2s ease; text-align: center; display: inline-block; } .custom-button::first-letter { font-family: "UnifrakturMaguntia", cursive; font-size: 16px; font-weight: normal; line-height: 1; vertical-align: baseline; } .custom-button:hover { background: rgba(150, 170, 210, 0.8); transform: translateY(-1px); } .custom-button:active { transform: translateY(1px); } ;