Unable to get Google Fonts to display in custom character sheet

Hi! I'm pretty new to custom sheet creation, but I've got experience in HTML/CSS/JavaScript, so I didn't think this would be too difficult, but I was wrong lol. I'm working on setting up some custom character sheets for Polaris (2005) using Anduh's template as a base, and for the life of me, I can't get any Google Fonts to display. I've tried several different font families and a number of combinations of different variations on the @import url based on suggestions from the wiki (including font weights, not including font weights, replacing + with %20, changing css2 to css, only a single family instead of multiple, adding | between families, etc.) as well as messing with the CSS, and all that seems to happen is the text changes to serif/non-serif. I suspect I'm missing something obvious, so if anyone has any suggestions I would be very grateful! Even if it's only the &lt;h3&gt; titles in a different font, that would be good enough. The code as it is right now: @import url('<a href="https://fonts.googleapis.com/css2" rel="nofollow">https://fonts.googleapis.com/css2</a>? family= Cinzel &amp; display=swap'); .charsheet * { &nbsp; font-family: 'Cinzel', serif; } .charsheet h3{ &nbsp; font-family: 'Cinzel', serif; &nbsp; text-align: center; }

Something to check: make sure you are in CSE mode , not legacy. edit/update: While legacy can use @import I'm pretty sure you cannot use the css2 format. <a href="https://wiki.roll20.net/Character_Sheet_Development/CSS#Fonts" rel="nofollow">https://wiki.roll20.net/Character_Sheet_Development/CSS#Fonts</a>

This is a brand new sheet, so I'm fairly certain I should be in CSE mode, but I just went and double-checked. Unfortunately, even with { "legacy": false } in the sheet.json, the fonts still aren't displaying.

Try this: @import url('<a href="https://fonts.googleapis.com/css" rel="nofollow">https://fonts.googleapis.com/css</a>? family= Cinzel &amp; display=swap'); If I remember correctly, it's the css2 that's screws things up, so just use css.

Yes, you have to use the format stated in the wiki - dont use css2.

The wiki says that css2 should be fine with the new CSE sheets, but I've already tried it both ways, neither seems to work. I've even tried adding font weights and removing font weights, and all that changes is the weight, not the font family itself. I'm quite stumped tbh, because it seems like the code is working, the font family just isn't getting imported. This code makes all the text 400 weight and the default serif font, but it's still not showing anything in Cinzel, and does the same thing no matter what font family I try to use: @import url('<a href="https://fonts.googleapis.com/css?family=Cinzel:400&amp;display=swap" rel="nofollow">https://fonts.googleapis.com/css?family=Cinzel:400&amp;display=swap</a>'); .charsheet * { &nbsp; font-family: 'Cinzel', serif; &nbsp; font-weight: 400; } .charsheet h3{ &nbsp; font-family: 'Cinzel', serif; &nbsp; text-align: center; }

Really need to update that bit of the wiki. The css is valid on the sheet itself but will cause the roll template styling to be tossed out.

If you're using the import as above (css?family), then the next question would be are there any unicode characters (even if it's the hex version) in your CSS anywhere? That will also cause the CSS to be rejected by r20.

AstralEcliptic said: The wiki says that css2 should be fine with the new CSE sheets, but I've already tried it both ways, neither seems to work. I've even tried adding font weights and removing font weights, and all that changes is the weight, not the font family itself. I'm quite stumped tbh, because it seems like the code is working, the font family just isn't getting imported. This code makes all the text 400 weight and the default serif font, but it's still not showing anything in Cinzel, and does the same thing no matter what font family I try to use: @import url('<a href="https://fonts.googleapis.com/css?family=Cinzel:400&amp;display=swap" rel="nofollow">https://fonts.googleapis.com/css?family=Cinzel:400&amp;display=swap</a>'); .charsheet * { &nbsp; font-family: 'Cinzel', serif; &nbsp; font-weight: 400; } .charsheet h3{ &nbsp; font-family: 'Cinzel', serif; &nbsp; text-align: center; } This works for me in FF and Chrome (cse as well as legacy) Using win10... Browser?

@ Finderski I'm not aware of any Unicode in my CSS, but that's good to know! @ vÍnce I'm using Firefox on Windows. I just tested that code block without the rest of my css, and it worked, so I tried moving the @import url to the top of my css file, and the fonts are working now! It's in the middle of the original template's css file, so I had assumed that the template was correct and Roll20 was just different from regular css, but it seems not. Maybe it's fine in other browsers? But I'll just keep that in mind for the future. Thank you for all of your help!

Good to hear.&nbsp; I think it's mentioned somewhere that it needs to be (at the top/near the top) of the css file for roll20...&nbsp; One of many roll20 sheet idiosyncrasies. ;-P&nbsp; When in doubt, I often do a search on roll20's github repo to see how other sheets are setup.&nbsp; Cheers

It isn't a Roll20 idiosynchrasy, it's a core CSS rule: Imported rules must come before all other types of rules, except @charset rules. from MDN . edit - some forms of postCSS might allow some flexibility there, can't remember, but the compiled CSS will still have the @imports at the top

Thanks for the clarification Oosh.

Yeah, sorry, wasn't sure if I was being "pedantic" or "useful". Thought it might head off an erroneus entry being added to the wiki though :)