Problems with Google Fonts

Hi all, I'm consistently having problems with using Google Fonts on different custom characters sheets that i've made. The font on the character does not look the same as the Google Font example. I've taken a snapshot of the GoogleFont from their site at 14px 900 weight <a href="https://fonts.google.com/specimen/Piazzolla?preview.text=Guard%20Rank&amp;preview.text_type=custom&amp;query=al&amp;selection.family=Piazzolla:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900#standard-styles" rel="nofollow">https://fonts.google.com/specimen/Piazzolla?preview.text=Guard%20Rank&amp;preview.text_type=custom&amp;query=al&amp;selection.family=Piazzolla:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900#standard-styles</a> and then put alongside a snapshot of the same, on my character sheet. Again 14px and 900 weight They don't match! And it's very noticeable. The look of the character sheet looks really dated, compared to the GoogleFont which is better rendered, smoother edges. I wondered, if it wasn't picking up the font at all, but I can see it in the active CSS, and when i disable it, the font changes to the background Helvetica. So it seems to be getting something for the Google font family. It just doesn't match XD It's really frustrating, as getting the look and feel of the sheets is so important. Any help much appreciated!

I've also now found, that have the import for the googlefonts is stopping my tabs from working. As soon as the imports are included - they don't seem to cause any crashes/errors - however the tabs are not setting the display properties anymore. So the .sheet-character CSS below, are not being called...and so missing from the rendered page I'm assuming there must be something wrong with the imports...but can't see what, other than the CSS2 problem, that i've already removed @import url('<a href="https://fonts.googleapis.com/css?family=Alegreya:ital,wght@0,400;0,500;0,700;0,800;0,900;1,400;1,500;1,700;1,800;1,900&amp;display=swap" rel="nofollow">https://fonts.googleapis.com/css?family=Alegreya:ital,wght@0,400;0,500;0,700;0,800;0,900;1,400;1,500;1,700;1,800;1,900&amp;display=swap</a>'); @import url('<a href="https://fonts.googleapis.com/css?family=Piazzolla:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;display=swap" rel="nofollow">https://fonts.googleapis.com/css?family=Piazzolla:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;display=swap</a>'); @import url('<a href="https://fonts.googleapis.com/css?family=Caveat:wght@400;500;600;700&amp;display=swap" rel="nofollow">https://fonts.googleapis.com/css?family=Caveat:wght@400;500;600;700&amp;display=swap</a>'); /*Configure the tab buttons*/ .sheet-character, .sheet-stats, .sheet-inv, .sheet-magic, .sheet-rest { display: none; } /* show the selected tab */ .sheet-tabstoggle[value="character"] ~ div.sheet-character, .sheet-tabstoggle[value="stats"] ~ div.sheet-stats, .sheet-tabstoggle[value="inv"] ~ div.sheet-inv, .sheet-tabstoggle[value="rest"] ~ div.sheet-rest, .sheet-tabstoggle[value="magic"] ~ div.sheet-magic,{ display: block; }

Have you tried removing the weight/italics/extra definitions form the font's urls? There is a chance roll20 supports only importing the fonts, but doesn't like the advanced options, haven't seen that used at least. Have you tried to only have one @import ? I have a vague memory that roll20 might only want one at most, and cause troubles if several are added. Importing several fonts in a single @import is possible, as is shown in this example: <a href="https://wiki.roll20.net/BCS#Google_Fonts" rel="nofollow">https://wiki.roll20.net/BCS#Google_Fonts</a>

Thanks for the suggetions! Firstly, importing just one font, did seem to work, both with the tabs issue and the quality of the font! Even when I included all the weights and italics. I will try the several fonts in one import next...

FYI - I've managed to include all 3 fonts, and their weights and italics in one import. And everything works. So I'm assuming the issue is when you have multiple imports @import url('<a href="https://fonts.googleapis.com/css?family=Piazzolla:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900|Caveat:wght@400;500;600;700|Alegreya:ital,wght@0,400;0,500;0,700;0,800;0,900;1,400;1,500;1,700;1,800;1,900&amp;display=swap" rel="nofollow">https://fonts.googleapis.com/css?family=Piazzolla:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900|Caveat:wght@400;500;600;700|Alegreya:ital,wght@0,400;0,500;0,700;0,800;0,900;1,400;1,500;1,700;1,800;1,900&amp;display=swap</a>'); Thanks for the help!!

Great that we got it solved!