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

Roll Template fonts

I'm not having any luck with a custom font displaying properly in the Roll Template output to the chat. CSS line 1 is: @import url('<a href="https://fonts.googleapis.com/css2?family=B612+Mono:ital,wght@0,400;0,700;1,400;1,700&amp;family=Kode+Mono:wght@400..700&amp;display=swap" rel="nofollow">https://fonts.googleapis.com/css2?family=B612+Mono:ital,wght@0,400;0,700;1,400;1,700&amp;family=Kode+Mono:wght@400..700&amp;display=swap</a>'); ...which loads Kode Mono into the character sheet &nbsp;just fine. The Roll Template... not so much. -I've tried in line reference in the Template (including using &lt;style&gt; at one point): &lt;rolltemplate class="sheet-rolltemplate-custom"&gt; &nbsp; &nbsp; &lt;div style=style="font-family: 'Kode Mono', monospace !important;" class="sheet-container sheet-color-{{color}}"&gt; &nbsp; &nbsp; &lt;/div&gt; -And explicit reference to the font in the CSS for the template itself (again the font renders on the character sheet just fine, so the rest of the CSS seems to be picking it up just fine): .sheet-rolltemplate-custom { &nbsp; &nbsp; margin-left: -37px; &nbsp; &nbsp; font-family: 'Kode Mono', monospace !important; /* Added fallback font */ } -As above I've use the !important switch (no joy) but I do note that at least the monospace fallback is picked up by the template. So at least there's that. I feel I'm having a dumb here. Any advice folks?
1735673343
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
do you have multiple @import declarations in your CSS? If so, Roll templates only see the first @import statement. You need to import all your fonts in a single statement.
1735673765
vÍnce
Pro
Sheet Author
Hi Dylan, &lt;div style=style="font-family:... This would "probably" fail because it's malformed. s/b &lt;div style="font-family:... and @import url('<a href="https://fonts.googleapis.com/css2?family=B612+Mono:ital,wght@0,400;0,700;1,400;1,700&amp;family=Kode+Mono:wght@400..700&amp;display=swap" rel="nofollow">https://fonts.googleapis.com/css2?family=B612+Mono:ital,wght@0,400;0,700;1,400;1,700&amp;family=Kode+Mono:wght@400..700&amp;display=swap</a>'); .sheet-rolltemplate-custom { &nbsp;&nbsp;&nbsp; font-family: 'Kode Mono', monospace; } The above should work for the roll template.&nbsp; Is this a legacy sheet or CSE?&nbsp; Legacy games may have problems with webfonts due to some recent changes (security reasons if I recall correctly).&nbsp; Is this being tested as jumpgate?
1735677053
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
The security change was to close the ability to import fonts from other places. That isn't an issue here.
Hi folks. Thanks for the replies. &lt;div style=style="font-family: 'Kode Mono', monospace !important;" class="sheet-container sheet-color-{{color}}"&gt; &nbsp; &nbsp; &lt;/div&gt; The above was a cut and paste error to this post to the forum (Vince you are correct that is malformed as pasted), my Roll Template did indeed only have 1 style= still no joy.&nbsp; I'm stumped, and really wondering if Pro users just don't have enough access to change fonts in the chat window via a Roll Template. It's fine, courier mono is close enough... but I'd prefer Kode Mono if possible! I'll keep chipping away at it as I'm able... -D
1735801337

Edited 1735801812
GiGs
Pro
Sheet Author
API Scripter
Is the font available in google fonts? If not, I don't think you can use it. Edit: I'm coming to this thread late, and as about to point out the duplicate style but looks like you've caught that. I'm looking warily at this: &lt;rolltemplate class="sheet-rolltemplate-custom"&gt; &nbsp; &nbsp; &lt;div style="font-family: 'Kode Mono', monospace !important;" class="sheet-container sheet-color-{{color}}"&gt; &nbsp; &nbsp; &lt;/div&gt; because it looks like it contains style informaton inside a rolltemplate but does not include the rolltemplate name. I'd avoid inline styles (put the font-family inside a class), and make sure the class includes the sheet-rolltemplate-custom declaration. Applying styles to rolltemplates is finicky, and the fact yours is working for the character sheet but not the rolltemplate suggests that's what you are running afoul of.
1735830234
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
Ah, I realized what is going on. This is a variable font. Unfortunately, the import syntax for variable fonts will not work in roll templates (I'm actually surprised that you said it's working for the sheet itself). Try taking the :<a href="mailto:wght@400..700" rel="nofollow">wght@400..700</a> &nbsp;off the import line and then just set weight using the normal font-weignt property.
1735844755

Edited 1735844823
vÍnce
Pro
Sheet Author
Scott C. said: Ah, I realized what is going on. This is a variable font. Unfortunately, the import syntax for variable fonts will not work in roll templates (I'm actually surprised that you said it's working for the sheet itself). Try taking the : <a href="mailto:wght@400..700" rel="nofollow">wght@400..700</a> &nbsp;off the import line and then just set weight using the normal font-weignt property. I've used multiple @import for variable fonts on the 1e sheet like so; @import url('<a href="https://fonts.googleapis.com/css2?family=Material+Icons&amp;display=swap" rel="nofollow">https://fonts.googleapis.com/css2?family=Material+Icons&amp;display=swap</a>'); @import url('<a href="https://fonts.googleapis.com/css2?family=Caladea:ital,wght@0,400;0,700;1,400;1,700&amp;display=swap" rel="nofollow">https://fonts.googleapis.com/css2?family=Caladea:ital,wght@0,400;0,700;1,400;1,700&amp;display=swap</a>'); @import url('<a href="https://fonts.googleapis.com/css2?family=Poppins: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/css2?family=Poppins: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/css2?family=Raleway:ital,wght@0,100..900;1,100..900&amp;display=swap" rel="nofollow">https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&amp;display=swap</a>'); Here's a pic of the live sheet demonstrating the variables; I only use some of these on the sheet but added the additional variables(needlessly IMO/judgement) for a user that has leveraged them for their very complex scriptcard usage.&nbsp; I can't say I have tested in the roll template exclusively, but this user hasn't mentioned that they don't work for them in their mod macros.&nbsp; BTW: if I include them all in one @import it still works fine on the sheet but the user reports that they do not work for them in their mod scripts. Thoughts?
1735844915
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
Hmm, interesting. I know that multiple imports get stripped for the roll templates, which should be the same for API sent messages.
1735846487

Edited 1735846565
vÍnce
Pro
Sheet Author
So I just tested the sheet's roll template with the same variable font sample code that works on the sheet; (top is on the sheet and bottom is in the roll template posted to chat) Clearly the variable fonts do not work in the roll template.
Hi again folks!&nbsp; @Gig, yeah I only tried the in line style once I felt I was out of options on the CSS side.&nbsp; &nbsp; @ vÍnce, yeah I felt that getting it to work in the chat was something insurmountable for a user. Like I said the font is working in the sheet, and courier rendered smaller and mono in the chat for the template is close enough! Very much appreciate you all looking into this. Time is precious. Just pushed the sheet to GitHub.&nbsp; We'll see if it gets kicked back for anything, but I'm fairly certain it is compliant. Cheers, -Dylan