Trouble with Google Fonts

Before I post this is Bug forum, I figured I'd ask here and see if you all have any insight. &nbsp;I'm trying to use multiple Google fonts on a character sheet. When I grab the import from Google fonts it gives me this: @import url('<a href="https://fonts.googleapis.com/css2?family=Rye&amp;family=Teko&amp;family=Monoton&amp;family=DM+Mono&amp;display=swap" rel="nofollow">https://fonts.googleapis.com/css2?family=Rye&amp;family=Teko&amp;family=Monoton&amp;family=DM+Mono&amp;display=swap</a>'); That works great in a Custom Sheet game, but when I test it in my Sandbox game I get this error message: I can't seem to have more than one import statement in my CSS, because it ignores the second one. If I change the above statement to this: @import url('<a href="https://fonts.googleapis.com/css?family=Rye&amp;family=Teko&amp;family=Monoton&amp;family=DM+Mono&amp;display=swap" rel="nofollow">https://fonts.googleapis.com/css?family=Rye&amp;family=Teko&amp;family=Monoton&amp;family=DM+Mono&amp;display=swap</a>'); (change css2? to css?), everything loads fine, except it only acknowledges the first font-family in the URL (in this case Rye) and ignores all the subsequent ones. Anyone know why it works for a Custom Sheet, but not in the Sandbox? Is it is problem with the Sandbox or if I upload this to Git, will my sheet no longer have any CSS styling because the styling is thrown out (which is what happens in the sandbox)?

There's a specific syntax to loading multiple fonts. You need to separate them with a pipe (|), like so: @import url('<a href="https://fonts.googleapis.com/css?family=Zilla+Slab|Anton&amp;display=swap" rel="nofollow">https://fonts.googleapis.com/css?family=Zilla+Slab|Anton&amp;display=swap</a>'); So in your case, I think &nbsp;it would be (if I'm reading the names correctly): @import url('<a href="https://fonts.googleapis.com/css?family=Rye|Teko|Monoton|DM+Mono&amp;display=swap" rel="nofollow">https://fonts.googleapis.com/css?family=Rye|Teko|Monoton|DM+Mono&amp;display=swap</a>');

Weird, because the import statement I'm using is the one generated by Google...and it works in a custom sheet game. I'll give this a go, though... :)

Awesome. That seems to have done it. &nbsp;Thanks. :)

Great! And I should have said There's a specific syntax to loading multiple fonts on roll20 .&nbsp; I dont know why the roll20 syntax is different from the one google generates, but it is.&nbsp; Just roll20 things :)

GiGs said: I dont know why the roll20 syntax is different from the one google generates, but it is.&nbsp; Just roll20 things :) Truth...LOL

Finderski said: Weird, because the import statement I'm using is the one generated by Google... and it works in a custom sheet game. I'll give this a go, though... :) Yeah not how Roll20 likes to do things. Functioning multi-font import is documented on the wiki <a href="https://wiki.roll20.net/Building_Character_Sheets#Google_Fonts" rel="nofollow">https://wiki.roll20.net/Building_Character_Sheets#Google_Fonts</a> guess people keep missing the exact guide to do it in the docs that I should add it to common mistakes, bc following the guide to the letter isn't apparently done. I've seen this like five times already. Edit: It's now Common Mistake Nr. 8

ᐰndreas J. said: Functioning multi-font import is documented on the wiki <a href="https://wiki.roll20.net/Building_Character_Sheets#Google_Fonts" rel="nofollow">https://wiki.roll20.net/Building_Character_Sheets#Google_Fonts</a> guess people keep missing the exact guide to do it in the docs that I should add it to common mistakes, bc following the guide to the letter isn't apparently done. I've seen this like five times already. Edit: It's now Common Mistake Nr. 8 I missed it, because I didn't look at that page again. I looked at it to learn how to do it the first time...but this was the first time I wanted multiple fonts. And figured if I was copying from Google it would be the same for multi-fonts. :)

The wiki docs are constantly being updated, and even in sections that isn't, show reliably working examples. I've written most of the stuff there, and still double check things from the wiki every now and then, even if I was the one who wrote the section. So seriously, always check the wiki. I can pretty regularly just come into discussions on basic stuff like this an just drop links to the relevant sections, and often improve the documentation slightly after something in the thread was said. Like now, I added an explicit mention of removing the "2" from the url and to use single @import fro all fonts, even if it isn't strictly needed(as the working example shows this), but improves it anyway.

Finderski said: I missed it, because I didn't look at that page again. I looked at it to learn how to do it the first time...but this was the first time I wanted multiple fonts. And figured if I was copying from Google it would be the same for multi-fonts. :) Also, that's Common Mistake Nr. 5 :D

Fair...LOL

ᐰndreas J. said: So seriously, always check the wiki.&nbsp; Especially if you have a problem, it's worth checking to see if stuff's been added that solves that problem.

It's not that Roll20 changed, it's that Google fonts changed how they export their fonts roughly a year ago (April 2020). It still works using the explicit instructions in the wiki but Google Fonts now generates exports using CSS2 guidelines instead of the CSS1 guidelines that Roll20 uses; this was done as part of their implementation of font variations. That's why you used to be able to use the straight generated export but no longer.&nbsp;

Thanks for that explanation. That makes sense.

I suspect that the @import css rule is a façade in the Roll20 environment and isn't processed as natural CSS at all. That might explain why it took them so long to implement it and why you can't use the new CSS2 standards. It's being parsed and brought into their CSS and not directly done in the browser-- might explain why Finderski can use it in the Custom Sheet window, likely the @import rule is being processed by your browser since Custom Sheet is notoriously not a true Roll20 environment.

Cool, someone would add this info to the wiki section, so it's easily available: <a href="https://wiki.roll20.net/Building_Character_Sheets#Google_Fonts" rel="nofollow">https://wiki.roll20.net/Building_Character_Sheets#Google_Fonts</a>

Richard T. said: I suspect that the @import css rule is a façade in the Roll20 environment and isn't processed as natural CSS at all. That might explain why it took them so long to implement it and why you can't use the new CSS2 standards. It's being parsed and brought into their CSS and not directly done in the browser-- might explain why Finderski can use it in the Custom Sheet window, likely the @import rule is being processed by your browser since Custom Sheet is notoriously not a true Roll20 environment. If this is the case, I'd recommend R20 make a change, because if I was using the custom sheet to develop for the R20 repo...this could have gone very differently...it was on a whim I actually tested in the sandbox. For clarity, most of my testing is done in the sandbox, but I was working with someone in a custom sheet game, because we both needed access and when I got the CSS working there, I figured it would work everywhere... ᐰndreas J. said: Cool, someone would add this info to the wiki section, so it's easily available: <a href="https://wiki.roll20.net/Building_Character_Sheets#Google_Fonts" rel="nofollow">https://wiki.roll20.net/Building_Character_Sheets#Google_Fonts</a> Which stuff? Richard's speculations? Because the remove 2 (from css) and use the | is already there...

I'll try my hand at editing the wiki for clarity.&nbsp;

Richard T. said: I'll try my hand at editing the wiki for clarity.&nbsp; Appreciated. :D I've written plenty of stuff on the wiki, but I'm not a native English speaker, and writing understandable technical documentation is an art in it self.

Is there any additional rules missing? I'm trying to import both the 'Open Sans' and 'Open Sans Condensed' fonts, but any attempt at utilizing open Sans condensed results in a default font being loaded in it's place. It will only show open Sans. HTML and CSS for a test page in the sandbox were made, and 'Open Sans Condensed' isn't rendering. &lt; span &nbsp; class = "fontone" &gt; Open&nbsp;Sans &lt;/ span &gt; &lt; br &gt; &lt; span &nbsp; class = "fonttwo" &gt; Open&nbsp;Sans&nbsp;Condensed &lt;/ span &gt; @ import &nbsp; url ( '<a href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed|Open+Sans&amp;display=swap" rel="nofollow">https://fonts.googleapis.com/css?family=Open+Sans+Condensed|Open+Sans&amp;display=swap</a>' ); /*&nbsp;font-family:&nbsp;'Open&nbsp;Sans',&nbsp;sans-serif; &nbsp;&nbsp;&nbsp;font-family:&nbsp;'Open&nbsp;Sans&nbsp;Condensed',&nbsp;sans-serif;&nbsp;*/ . sheet-fontone &nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp; font-family :&nbsp; 'Open&nbsp;Sans' ,&nbsp; sans-serif ; } . sheet-fonttwo &nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp; font-family :&nbsp; 'Open&nbsp;Sans&nbsp;Condensed' ,&nbsp; sans-serif ; }

Gino Z. said: Is there any additional rules missing? I'm trying to import both the 'Open Sans' and 'Open Sans Condensed' fonts, but any attempt at utilizing open Sans condensed results in a default font being loaded in it's place. It will only show open Sans. HTML and CSS for a test page in the sandbox were made, and 'Open Sans Condensed' isn't rendering. I tried this "Open+Sans+Condensed:wght@300" thinking it just needed the weight but it did not work... however this(found a post online with the suggestion); "Open+Sans+Condensed:300" seems to work. ;-) I've updated the wiki as well;&nbsp; <a href="https://wiki.roll20.net/Building_Character_Sheets#Google_Fonts" rel="nofollow">https://wiki.roll20.net/Building_Character_Sheets#Google_Fonts</a> 3. Some fonts may require a font weight. ie "Open+Sans+Condensed:wght@300" For some reason this may not load in Roll20. Instead, try omitting "wght@" from the snippet. example; "Open+Sans+Condensed:300"

Yep, worked flawlessly. Much love, big thanks!

thanks Vince