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

4. 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.

The above method is a nice way to do it, as it means you hold the files and you only need to amend the .css file.

You can also do it by editing the html to include the weblink to the font in the

<link href="https://fonts.googleapis.com/css?family=Ranga|Roboto&display=swap" rel="stylesheet">	

div#squiffy-container
{
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
/*EDIT*/
    font-family: 'Ranga', cursive;
/*EDIT*/
}

Or just work in Xstyle.css file. Keep that in the same directory. When you are ready to run the program with full fonts, just open the Xstyle file and save it as style (remove the X). Then click on the index file to execute.

You can keep the open style.css file open in a side dialog and re-save over the newly generated one as needed. When you are ready to release the game, built it, rewrite the style file with Xstyle, and you're ready to zip and load.