How do I install an image (dingbats) font?

I have tried every way I know how; it seems like it should be easy, but the answer eludes me. I have tried various strategies with both the online and downloaded apps to no avail. Can anybody help?


Anyone? I'm interested as well.


You should be able to do it by editing the game's CSS file after building your game.

https://www.w3schools.com/css/css3_fonts.asp

https://stackoverflow.com/questions/14676613/how-to-import-google-web-font-in-css-file


Thanks!


Huh. It's not working for ME. Here's my code. I don't know what I'm doing wrong.

@font-face {
font-family: cabinSketch;
src: url(CabinSketch-Regular.otf);
}
div#squiffy-container
{
max-width: 1000px;
margin-left: auto;
margin-right: auto;
font-family: cabinSketch;
}


src: url(CabinSketch-Regular.otf);

Did you download the font and drop its otf file in the game's main website directory?


  1. I downloaded the "Stylish" font from Google Fonts to use in this example.

  2. I unzipped the downloaded file.

  3. I built a game, then dropped the Stylish-Regular.ttf file in my game's directory. Here are the contents of the directory:

'CSS_Example_Game.sq'   index.html   jquery.min.js   story.js   style.css   Stylish-Regular.ttf

  1. I opened the style.css file in a text editor and changed the CSS to this:
/*  EDIT 1 - I added this font-face section. */
@font-face {
	src: url(Stylish-Regular.ttf);
	font-family: Stylish;
}
/* END OF EDIT 1 */
a.squiffy-link
{
    text-decoration: underline;
    color: Blue;
    cursor: pointer;
}
a.squiffy-link.disabled
{
    text-decoration: inherit;
    color: inherit !important;
    cursor: inherit;
}
a.squiffy-header-link
{
    text-decoration: underline;
    color: Blue;
    cursor: pointer;
}
div#squiffy-container
{
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
/*EDIT 2 - I added "Stylish" to the font-family to change the default font to my included font.*/
    font-family: Stylish, Georgia, serif;
/*  END OF EDIT 2  */
}
div#squiffy-header
{
    font-size: 14px;
    text-align: right;
}
div#squiffy
{
    font-size: 18px;
}
hr {
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    margin-top: 16px; margin-bottom: 16px;
}


IMPORTANT NOTE

Every time you build (or rebuild, to be more accurate) the game, the CSS file will be overwritten, and you'll have to re-edit the CSS file to add the font stuff back in.

I think there is a workaround, but I'm pretty sure you have to use the CLI version of Squiffy to be able to use it.


Log in to post a reply.

Support

Forums