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

Font not working

January 24 (4 years ago)

Hi !

I'm working on a Character Sheet and I wanted to import a new font, but it won't work.

Is it because what I want to change is the text inside a textbox ?

Here's the HTML in concern :

 <div class='stats_sections'>

<input type="text" class="thingstofill"/>

</div>


And here's the CSS :

@font-face {
font-family: 'Coda Caption';
src: url(https://fonts.googleapis.com/css2?family=Coda+Caption:wght@800&display=swap);
}

.sheet-thingstofill {
background-color:transparent;
margin-top: 120px;
margin-left: 90px;
width: 30%;
font-size: 20rem;
font-family: 'Coda Caption';
color: yellow;
border-color: transparent;
}
January 24 (4 years ago)
Richard T.
Pro
Marketplace Creator
Sheet Author
Compendium Curator

Roll20 is a bit strange with font-imports. You can find more info here: https://wiki.roll20.net/Building_Character_Sheets#Google_Fonts

But you'll need to use @import instead of @font-face and you can't use the raw Google Font import rule. 

January 24 (4 years ago)

Edited January 24 (4 years ago)

Just did the exact same way the wiki says it and it doesn't work :


HTML :
<input type="text" name="attr_fight" class="fight" placeholder="00" />
CSS :
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro|Nunito|Source+Code+Pro|Coda+Caption&display=swap');


.sheet-fight {
background-color:transparent;
margin-top: 140px;
margin-left: 55px;
width: 30%;
font-size: 20rem;
font-family: 'Coda Caption';
color: yellow;
border-color: transparent;
text-align: center;
}
January 24 (4 years ago)
Kavini
Pro
Marketplace Creator
Sheet Author
Compendium Curator

Generally you should define font weights, I would also try to use %20 rather than + in your URI, too.

@import url('https://fonts.googleapis.com/css?family=Source%20Sans%20Pro:800|Nunito:800|Source%20Code%20Pro:800|Coda%20Caption:800&display=swap');

I hope this helps!