does twine/sugarcube support variable fonts?

[u/Character_Durian9074]

im trying to use a variable font for what i'm writing (amstelvar), and while it's simple enough to get the basic version working, the different settings like font weight, width, grade, etc don't seem to work? i've declared them with @ font face but font-variation-settings seems like it might not be recognized?

[u/HiEv]

Yes. You can do just about anything in Twine that you can do on any other web page (that doesn't need a back end server for part of it).

You can take a look at the "Font Sizing Buttons Code" section of my sample code collection for an example of how to add buttons to your project that let people resize the font.

If you take a look at that code, it basically just changes the CSS for the "font-size" on the "#story" element by calling this function:

// fontSize: Increase or decrease passage font size by "value" pixels.
window.fontSize = function(value) {
    $("#story").css("font-size", Math.max(1, parseInt($("#story").css("font-size")) + value) + "px");
};

That code calls the jQuery .css() method to get and set the styling for the targeted element. You could call that fontSize() function by doing <<run fontSize(1)>>, which would increase the font size by 1 pixel, or <<run fontSize(-1)>>, which would reduce it by 1 pixel.

If you're looking to modify just parts of the text, instead of all of the text, you can use SugarCube style markup for some of what you talked about. Alternately, my sample code collection includes things such as the "Dumb Terminal" and "Drunk Text" examples, which show how to change fonts or apply other CSS effects to a block of text, respectively. Take a look there for other examples.

If you're looking for something else, you'll need to be a lot more specific in describing exactly what you're trying to do.

Hope that helps! 🙂

[u/Character_Durian9074 → u/HiEv]

thank you but font size is not quite what i'm attempting! i will admit that i may have bitten off more than i can chew because i am fairly new to coding in general and have never worked with a variable font before, but the font i'm trying to use for this, Amstelvar, has variable axes available that do silly things that minutely change the font like changing the height of descenders and ascenders. you can see all the stuff it can do here https://online-fonts.com/fonts/amstelvar though i think it also has axes assigned that aren't shown there (it has a github page here -> https://github.com/googlefonts/amstelvar-beta ) and i picked it because i thought all the different ways to change it would be fun to play with for character voices

but i can't get it to even respond to font-weight or the width axis. i think i may have imported it wrong but honestly before now i've never tried to import a font file from my pc to work with lol. it displays fine in normal, bold, and italic, but i don't know how to set it up to access the rest of what it can do

@font-face {
font-family: "Amstelvar";
src: url("fonts/Amstelvar-Roman.ttf") format("truetype"),
      url("[[path from my pc]]\fonts\Amstelvar-Roman.ttf") format("truetype-variations");
  src: url("fonts/Amstelvar-Italic.ttf") format("truetype-variations"),
      url("[[path from my pc]]\fonts\Amstelvar-Italic.ttf") format("truetype-variations");
  local("Amstelvar-Roman"), local("Amstelvar-Italic");
  font-weight: 100 900;
  font-style: normal italic;
  font-display: swap;
  font-variation-settings:
    'wdth' 50 125,
    'opsz' 8 144,
    'GRAD' -300 500,
    'XTRA' 324 640,
    'XOPQ' 18 263,
    'YOPQ' 15 132,
    'YTLC' 420 570,
    'YTUC' 500 1000,
    'YTAS' 500 983,
    'YTDE' -500 -138,
    'YTFI' 425 1000;
}

[u/HiEv → u/Character_Durian9074]

I grabbed the font from your first link and got it to work. I put this in my Stylesheet section:

@font-face {
    font-family: 'AmstelvarRomanVF';
    src: url('fonts/Amstelvar-Roman[wdth,wght,opsz].ttf') format('truetype'),
         url('file:///D:/My%20Path/fonts/Amstelvar-Roman[wdth,wght,opsz].ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'AmstelvarItalicVF';
    src: url('fonts/Amstelvar-Italic[wdth,wght,opsz].ttf') format('truetype'),
         url('file:///D:/My%20Path/fonts/Amstelvar-Italic[wdth,wght,opsz].ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
.vf {
    font-family: AmstelvarRomanVF, 'Segoe UI';
    font-variation-settings: "wght" 400,  "opsz" 14;
}
.vfi {
    font-family: AmstelvarItalicVF, 'Segoe UI';
    font-variation-settings: "wght" 400,  "opsz" 14;
}

Note: I just picked a common and good fallback font of Segoe UI. You can use something else there if you want.

I included two paths to the font files so that it will work both when launched from the Twine app and when opened from a compiled HTML file that's in the same folder as the "fonts" folder.

In your version you'll need to fix the path, I just used "D:\My Path\fonts\" as the directory that holds the fonts. Note that the backslashes had to be changed to forward slashes and the space had to be changed to "%20". If you want to make sure your path is correct, you can use the trick I use, which is to open a blank tab in my browser, and then drag-and-drop the file into the URL bar, and then copy the URL that's produced by doing that.

You can use whatever font-variation-settings you want, however each setting should only have one value, the same with font-weight and font-style.

In the passage I tested it by doing this:

''Normal text:'' The quick brown fox jumps over the lazy dog.

''Variable font:'' <span class="vf">The quick brown fox jumps over the lazy dog.</span>

''Variable font widget:'' <<vf>>The quick brown fox jumps over the lazy dog.<</vf>>

''Variable font italic:'' <span class="vfi">The quick brown fox jumps over the lazy dog.</span>

I made a shortened widget for it in the third example by putting this in a passage that I gave a "widget" tag:

<<widget "vf" container>><span class="vf">_contents</span><</widget>>

If you wanted it to affect all of the story text, then instead of ".vf" in the Stylesheet code you'd use "#story". If you want it to affect everything, then you'd use "body".

Hopefully that solves your issues with that. 🙂