Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

Trouble with Google Fonts

1611049742
Finderski
Pro
Sheet Author
Compendium Curator
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)?
1611055607
GiGs
Pro
Sheet Author
API Scripter
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>');
1611056018
Finderski
Pro
Sheet Author
Compendium Curator
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... :)
1611056244
Finderski
Pro
Sheet Author
Compendium Curator
Awesome. That seems to have done it. &nbsp;Thanks. :)
1611056719
GiGs
Pro
Sheet Author
API Scripter
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 :)
1611057501
Finderski
Pro
Sheet Author
Compendium Curator
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
1611057676

Edited 1611058250
Andreas J.
Forum Champion
Sheet Author
Translator
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
1611059311

Edited 1611059358
Finderski
Pro
Sheet Author
Compendium Curator
ᐰ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. :)
1611060173
Andreas J.
Forum Champion
Sheet Author
Translator
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.
1611060368
Andreas J.
Forum Champion
Sheet Author
Translator
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
1611061047
Finderski
Pro
Sheet Author
Compendium Curator
Fair...LOL
1611062227
GiGs
Pro
Sheet Author
API Scripter
ᐰ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.
1611132357

Edited 1611132499
Richard T.
Pro
Marketplace Creator
Sheet Author
Compendium Curator
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;
1611133361
GiGs
Pro
Sheet Author
API Scripter
Thanks for that explanation. That makes sense.
1611139710

Edited 1611139966
Richard T.
Pro
Marketplace Creator
Sheet Author
Compendium Curator
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.
1611150210
Andreas J.
Forum Champion
Sheet Author
Translator
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>
1611151114
Finderski
Pro
Sheet Author
Compendium Curator
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...
1611193749
Richard T.
Pro
Marketplace Creator
Sheet Author
Compendium Curator
I'll try my hand at editing the wiki for clarity.&nbsp;
1611217401
Andreas J.
Forum Champion
Sheet Author
Translator
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.
1611765543

Edited 1611766041
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 ; }
1611794718

Edited 1611795471
vÍnce
Pro
Sheet Author
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!
1611840534
Andreas J.
Forum Champion
Sheet Author
Translator
thanks Vince