<function name="SetFontName" parameters="font">
    game.defaultfont = font
    game.defaultwebfont = ""
  </function>

Why does this set game.defautwebfont to an empty string?

I am guessing it was coded this way because of the way the editor controls add and "remove" attributes. (The editor will create an attribute that doesn't exist, but it will not delete an attribute -- it will make a string empty, or a boolean false, or what have you. It does this to avoid errors due to undefined attributes during play.)

The only place I find SetFontName() used is in the editor controls code.

The same goes for SetWebFontName().

  <editor>
    <appliesto>(function)SetFontName</appliesto>
    <display>Change font to #0</display>
    <category>[EditorScriptsOutputOutput]</category>
    <create>SetFontName ("Georgia, serif")</create>
    <add>[EditorScriptsOutputChangefont]</add>

    <control>
      <controltype>label</controltype>
      <caption>[EditorScriptsOutputChangethefont]</caption>
    </control>

    <control>
      <controltype>expression</controltype>
      <simple>name</simple>
      <simpleeditor>dropdown</simpleeditor>
      <attribute>0</attribute>
      <source>basefonts</source>
      <freetext/>
    </control>
  </editor>

  <editor>
    <appliesto>(function)SetWebFontName</appliesto>
    <display>Change font to #0</display>
    <category>[EditorScriptsOutputOutput]</category>
    <create>SetWebFontName ("")</create>
    <add>[EditorScriptsOutputChangefontWeb]</add>

SetWebFontName doesn't modify game.defaultfont at all.

  <function name="SetWebFontName" parameters="font">
    AddExternalStylesheet ("https://fonts.googleapis.com/css?family=" + Replace(font, " ", "+"))
    game.defaultwebfont = font
  </function>

But I can't find where it sets the fallback fonts anywhere in the code.

  <function name="GetCurrentTextFormat" type="string" parameters="colour">
    style = ""
    
    if (UIOptionUseGameFont()) {
      font = GetCurrentFontFamily()
    }
    else {
      font = GetUIOption("OverrideFontName")
    }
    
    if (LengthOf(font) > 0) {
      style = style + "font-family:" + font + ";"
    }

  <function name="OutputTextNoBr" parameters="text">
    <![CDATA[
    OutputTextRawNoBr(ProcessText(text))
    ]]>
  </function>


  <function name="OutputTextRawNoBr" parameters="text">
    <![CDATA[
    JS.addText("<span style=\"" + GetCurrentTextFormat("") + "\">" + text + "</span>")
    RequestSpeak (text)
    ]]>
  </function>

It does it somewhere. In a real example, I run this script:

SetWebFontName ("Della Respira")
game.defaultfont = "Times New Roman, serif"

That will output this now: <span style="font-family:'Della Respira', Times New Roman, serif;color:Black;font-size:12pt;">Hello, forum!</span>

It behaves the same way without that script, and just adding "Della Respira" as the web font in the editor.

BUT here is the point: this script will leave you with Georgia as the font:

SetWebFontName("Della Respira")
SetFontName("Georgia, serif")

<span style="font-family:Georgia, serif;color:Black;font-size:12pt;">Hello, forum!</span>

And this script will leave you with 'Della Respira' as the font, and with "Georgia" and "serif" as fallback fonts:

SetFontName("Times New Roman, serif")
SetWebFontName("Della Respira")

<span style="font-family:'Della Respira', Georgia, serif;color:Black;font-size:12pt;">Hello, forum!</span>

Okay, now I see the line of code I was missing. It's the last line:

  <function name="GetCurrentFontFamily" type="string">
    if (game.defaultwebfont = null) {
      return (game.defaultfont)
    }
    else {
      if (game.defaultwebfont = "") {
        return (game.defaultfont)
      }
      else {
        return ("'" + game.defaultwebfont + "', " + game.defaultfont)
      }
    }
  </function>

To me, it seems that SetFontName shouldn't modify game.defaultwebfont.

But, there might be a good reason it does. So...

What is the best practice when using a script to alter the font family to use a web font when available with custom fallback fonts?

The only way I can get it to work with fallbacks other than "Georgia, serif" is like this:

SetWebFontName ("Della Respira")
game.defaultfont = "Times New Roman, serif"

// The first line loads the font from Google
SetWebFontName("Della Respira")
// This second line doesn't load the web font without first line.
SetFontName("Della Respira, Times New Roman, serif")

That script has the same end result as this:

SetWebFontName("Della Respira")
game.defaultfont = "Times New Roman, serif"

And this works in the desktop player, but it doesn't load the web font online:

game.defaultwebfont = "Della Respira"
game.defaultfont = "Times New Roman, serif"

The important bit seems to be having your desired web font set as the value of game.defaultwebfont by calling SetWebFontName before any other code, so Quest knows to load the font from Google.

After testing, I find that using SetFontName alone will not download the font from Google, even if you do this (which you can't do in the online editor): SetFontName("Della Respira, Times New Roman, serif")

Why does this set game.defautwebfont to an empty string?

It's a long time since I looked at this, and I never really played with it because I don't generally think too much about UI stuff. But I got the impression that the game renders using game.defaultwebfont if it exists, and game.defaultfont otherwise. So if a user wants to switch from a webfont to one of the default font families, you'd need SetFontName to unset the webfont.

Something like that?

That makes sense. I bet that's the reasoning behind it.