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

The font I put in CSS is not working.

After Roll20 update, it does not apply even if you put the font in the CSS column of the custom sheet.
Did you all experience the same bug?

May 26 (1 year ago)

Edited May 26 (1 year ago)
vÍnce
Pro
Sheet Author

Is this a legacy sheet or non-legacy?  Can you post a copy of your css snippet in regards to your font change?

There has been some issues over the last 10 days or so with legacy sheets having there inline css removed on the Live server.  Usually the sheet looks fine in the sandbox or custom game however.  But there have been some reports of other oddities with the character sheet styling as well...
 

Hi. I'm currently experiencing the same issue. I was wondering if anyone knows how to solve it?


I've checked the problem and certain fonts are working, but others are not.


vÍnce said:

Is this a legacy sheet or non-legacy?  Can you post a copy of your css snippet in regards to your font change?

There has been some issues over the last 10 days or so with legacy sheets having there inline css removed on the Live server.  Usually the sheet looks fine in the sandbox or custom game however.  But there have been some reports of other oddities with the character sheet styling as well...
 


This is not a legacy sheet. However, I just checked and it doesn't seem like the font is applied to legacy seats as well.
This is not just a font in the sheet, but the font is not applied to the Roll20 chat window.

May 27 (1 year ago)

Edited May 27 (1 year ago)
vÍnce
Pro
Sheet Author

Which sheet?

May 27 (1 year ago)

Edited May 27 (1 year ago)


vÍnce said:

What sheet?

it's custom sheet. The address where you can download the sheet is below. 

https://tatecks.cafe24.com/bbs/board.php?bo_table=customsheet&wr_id=11

After connecting the sheet, I put the following font in the css column and it doesn't execute.
I'm not the one who made this sheet, so I'm sorry I don't know the details of the sheet.



@font-face {

    font-family: 'KCCChassam';

    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302@1.0/KCCChassam.woff2') format('woff2');

    font-weight: normal;

    font-style: normal;

}

@font-face {

    font-family: 'TTHakgyoansimMulgyeolB';

    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2402_keris@1.0/TTHakgyoansimMulgyeolB.woff2') format('woff2');

    font-weight: 700;

    font-style: normal;

}


By the way, when I used these macros for desc to make that font work, it was close to meaning that the macros were not working.

/desc [?{내용}](#"style="text-decoration: none; inherit; font-style: normal; color:#000000; font-family:'BookkMyungjo-Bd'; font-size:15px; )

May 27 (1 year ago)

Edited May 27 (1 year ago)
vÍnce
Pro
Sheet Author

Looking at the code real quick, that is a legacy sheet. So make sure that you have Legacy enabled in your custom game settings. Also just assigning the font face in the CSS would not be enough to substitute fonts. You would also have to call those fonts by their name in the rest of the CSS in order to see the change. Did you make other changes to your CSS besides just adding font face?

for example;
any place in the css that had
font-family:'맑은고딕', 'Malgun Gothic';
could be updated to
font-family: 'KCCChassam', '맑은고딕', 'Malgun Gothic';

In theory, that should work to update that particular css declaration for a given class and/or element. You may have to substitute in multiple places in the css to get what you want.

Could you please help me? I am using a Legacy Sheet, and the Legacy is enabled. The sheet was working fine until a few days ago, but when I accessed it two days ago, the fonts started to break.

If I disable the legacy check, the fonts display correctly, but the layout of the sheet gets messed up. If I enable the legacy check, all fonts except for certain ones are not applied.

Also, even though the font-family is specified, when I press F12 to inspect the element, the font is not applied.

Here is the file. Could you please check it?

https://drive.google.com/drive/folders/1WOaDE-UjHo8PthrR_KP7Y86cxSTv16aS?usp=drive_link

According to the CSS inspection, only 'RIDIBATANG' and 'KCC-eunyoung' fonts are recognized.


May 28 (1 year ago)
vÍnce
Pro
Sheet Author

I did a quick check and I believe that everything regarding the use of @font-face{...} is correct.  As you mentioned, it appears using @font-face is no longer working in Legacy mode. Disabling Legacy mode allows the @font-face fonts to load as expected.  Considering that this was working until recently... it might be a bug or possibly intended behavior moving forward.  Not sure. Only the Devs would know about that. 
I would file a bug report with the help desk to get their attention.

Here's a very simple example;
html

<div>
    <h3 style="font-family: 'HeirofLightBold';">HeirofLightBold</h3>
    <h3 style="font-family: 'InkLipquid';">InkLipquid</h3>
    <h3 style="font-family: 'BBTreeCR';">BBTreeCR</h3>
    <h3 style="font-family: 'JSongMyung-Regular-KO';">JSongMyung-Regular-KO</h3>
    <h3 style="font-family: 'GowunBatang-Regular';">GowunBatang-Regular</h3>
    <h3 style="font-family: 'Cafe24SsurroundAir';">Cafe24SsurroundAir</h3>
    <h3 style="font-family: 'RIDIBatang';">RIDIBatang</h3>
    <h3 style="font-family: 'KCC-eunyoung';">KCC-eunyoung</h3>
</div>

css

@font-face {
font-family: 'HeirofLightBold';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/HeirofLightBold.woff') format('woff');
}
@font-face {
font-family: 'InkLipquid';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/InkLipquid.woff') format('woff');
}
@font-face {
font-family: 'BBTreeCR';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_nine_@1.1/BBTreeCR.woff') format('woff');
}
@font-face {
font-family: 'JSongMyung-Regular-KO';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2110@1.0/JSongMyung-Regular-KO.woff2') format('woff2');
}
@font-face {
font-family: 'GowunBatang-Regular';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/GowunBatang-Regular.woff') format('woff');
}
@font-face {
font-family: 'Cafe24SsurroundAir';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/Cafe24SsurroundAir.woff') format('woff');
}
@font-face {
font-family: 'RIDIBatang';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.0/RIDIBatang.woff') format('woff');
}
@font-face {
font-family: 'Cafe24Shiningstar';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Cafe24Shiningstar.woff') format('woff');
}
@font-face {
font-family: 'KCC-eunyoung';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/KCC-eunyoung-Regular.woff') format('woff');
}

"Legacy": true

"Legacy": false


안녕하세요! 해당 문제가 해결되지 않아 서포트팀 쪽으로 문의했더니 저희가 지금 해결할 수 없는 버그인 것 같습니다.

오늘 답변이 와  공유해드립니다.

Hi there,
Thanks for reaching out and sorry for the trouble!
 
This is an issue that our team is aware of and is on our radar for a fix as soon as we can! I've made sure to add this report to our internal ticket as well so it can be prioritized properly.
 
If there is anything else you might need assistance with, please just let me know.
 
Thank you for your patience!
Miles



에퐁 said:





May 30 (1 year ago)
vÍnce
Pro
Sheet Author

Sweet.  Glad to hear that it's on the Dev's radar.

Thank you! If it weren't for you, I would have been worrying about this for days. Thank you so much for your help.

Hey Folks,

Sorry for the delayed response on this one. Miles contacted us and let us know you were having problems. Here's the issue.

Recently, we implemented security measures that restrict the use of fonts not delivered through Google Fonts. We have found that importing fonts can be a security risk, and we need to limit our exposure to that. As of right now, only fonts imported from Google Fonts work. We are quickly looking for safe ways around this to give you all the font options you'd like to use, but for now, I'd suggest looking to see if there are Google Fonts you can use in the meantime.

I'll keep you posted with what we learn. Sorry for the inconvenience.

June 04 (1 year ago)

Edited June 04 (1 year ago)
vÍnce
Pro
Sheet Author

Thanks for the update Andrew.  So in my test last week @font-face failed in legacy, but worked in non-legacy.  UPDATE: Just verified that @font-face still works in non-legacy.
Is that the expected behavior?


vÍnce said:

Thanks for the update Andrew.  So in my test last week @font-face failed in legacy, but worked in non-legacy.  UPDATE: Just verified that @font-face still works in non-legacy.
Is that the expected behavior?


Hey vÍnce and 燈臺,
So we looked into this. For now, when using legacy sanitization mode for building sheets, you'll need to use the Google API to deliver fonts. Anything else won't work. This is because of a security risk that was recently identified. So that leaves you with two options. (1) You can switch to non-legacy sanitization and update the sheet from there, or (2) use Google Fonts for your sheet instead.

I'm really sorry how this impacts you. If you have more concerns, please let me know.

June 05 (1 year ago)
vÍnce
Pro
Sheet Author


Andrew Searles said:


vÍnce said:

Thanks for the update Andrew.  So in my test last week @font-face failed in legacy, but worked in non-legacy.  UPDATE: Just verified that @font-face still works in non-legacy.
Is that the expected behavior?


Hey vÍnce and 燈臺,
So we looked into this. For now, when using legacy sanitization mode for building sheets, you'll need to use the Google API to deliver fonts. Anything else won't work. This is because of a security risk that was recently identified. So that leaves you with two options. (1) You can switch to non-legacy sanitization and update the sheet from there, or (2) use Google Fonts for your sheet instead.

I'm really sorry how this impacts you. If you have more concerns, please let me know.

Thank you for the confirmation Andrew.


Hi, hope I'm not bothering anyone by bringing this up again. I have been making custom legacy sheets using this font, which is a Google font, and it no longer seems supported. Is there a workaround I'm missing? Thank you!

June 19 (1 year ago)
vÍnce
Pro
Sheet Author
Seems that there are more and more issues arising with legacy sheets...  Can you post your css line that calls the google font?
If it were me, I would push to make your sheet(s) non-legacy.
June 21 (1 year ago)

Edited June 21 (1 year ago)


vÍnce said:

Can you post your css line that calls the google font?


@font-face {

  font-family: "Gemunu Libre";

  font-style: normal;

  font-weight: 400;

  src: url(https://fonts.gstatic.com/s/gemunulibre/v14/X7n34bQ6Cfy7jKGXVE_YlqnbEQAFP-PIuTCp0xiJDvOBeQ.woff2) format('woff2');

  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;

}


I'm not opposed to updating to non-legacy, but it seems like a chore and this is only a sheet I'm using in a small game with friends.

June 22 (1 year ago)
vÍnce
Pro
Sheet Author

Thanks Charlotte.
I might be mistaken, but that's not a google font, is it?  Or at least it's not being served from Google directly.  Roll20 has said they are no longer allowing legacy sheets to utilize @font-face for security reasons... so you might try finding a google font using @import
Looks like google does have "Gemunu Libre", so you could try using;

@import url('https://fonts.googleapis.com/css2?family=Gemunu+Libre:wght@200..800&display=swap');

but, I'm not sure legacy will allow css2 either.  YMMV
Or convert the sheet to non-legacy and use @font-face
;-)

I'm pretty sure this is a Google font, it's from the Google fonts page (I think I posted the link in another thread with you but I can go find it again if needed). Unfortunately it doesn't seem to work in css or css2. 

June 22 (1 year ago)
vÍnce
Pro
Sheet Author

You can also try just css (vs css2) since roll20 seems to have issues with css2 sometimes as well.

@import url('https://fonts.googleapis.com/css?family=Gemunu+Libre:wght@200..800&display=swap');

I wish I had a better answer but I think the way forward is non-legacy.