There is more than one way to do this, this is how I do it (this is only on the desktop version, not sure you can do it at all on the web version).

The trick is to add it to an attribute. You need to do this in full code view (Tools - Code view), as Quest will try to format it if you put it into the GUI.

  <object name="interface_obj">
    <stuff><![CDATA[
      <style>
        .ui-widget-header {
          background-image: none;
          background-color: maroon;
          border-color: black;
        }
        .ui-widget-content {
          background-color: vanilla;
          background-image: none;
          border-color: maroon;
          color: maroon
        }
        .ui-dialog-buttonset {
          background-color: vanilla;
          background-image: none;
          border-color: maroon;
          color: maroon
        }
        .ui-state-default {
          background-color: vanilla;
          background-image: none;
          border-color: maroon;
          color: maroon
        }
      </style>
  </stuff>
</object>

The first and last line tell Quest this is an object called "interface_obj". The second line and the last but one line tell Quest this will be an attribute called "stuff". Everything else is going stright into theweb page. In this case, a <style> element defining CSS but it could also be a <script> element defining JavaScript, or both.

If you then do this in 'InitUserInterface' (see here for how to do that):

JS.addText(object.stuff)

The CSS will get added to the page. You could put that in a library file, and then never see it in the editor at all.

Very cool!

Thank you!

So as not to confuse anyone, I shall hide the majority of this. It contains a completely different example.

<!-- This is how I have it set up right now. -->
 <css>
    @font-face {
	font-family: 'Rye Custom';
		src: url(data:font/ttf;base64, VERY_LONG_BASE64_CODE_IS_HERE ) format('truetype');
    }

//I initially set this up in 5.6, which didn't have the Location Box setting options
    div#location {
      color:white;
      background:black;
      font-family:Georgia !important;
      font-weight:bold;
    }
    input#txtCommand {
    background:white !important;
    color:black !important;
    }
    div#bio, div#bio.ul, div#bio.li {
      color:black;
      background:white;
      font-family:Georgia !important;
      font-size:10 !important;
      padding-right:12px;
      padding-left:12px;
      padding-bottom:12px;
     }
 </css>

<start type="script">
      addStyleSheet (game.css)
    </start>

<function name="addStyleSheet" parameters="css">
    AddExternalStylesheet ("data:text/css," + urlEncode(css))
  </function>
  <function name="urlEncode" parameters="s" type="string"><![CDATA[
    s = Replace(s, "%", "%25")
    s = Replace(s, " ", "%20")
    s = Replace(s, "\"", "%22")
    s = Replace(s, "#", "%23")
    s = Replace(s, "$", "%24")
    s = Replace(s, "&", "%26")
    s = Replace(s, "'", "%27")
    s = Replace(s, ",", "%2C")
    s = Replace(s, ":", "%3A")
    s = Replace(s, ";", "%3B")
    s = Replace(s, "<", "%3C")
    s = Replace(s, "=", "%3D")
    s = Replace(s, ">", "%3E")
    s = Replace(s, ">", "%3F")
    s = Replace(s, "{", "%7B")
      s = Replace(s, "}", "%7D")
    return (s)
  ]]></function>

Will the method you just posted allow me to select a custom font from the Game -> Display options (and to switch to a custom font using SetWebFontName)?

Will the method you just posted allow me to select a custom font from the Game -> Display options (and to switch to a custom font using SetWebFontName)?

No. I think you could add a Base64 font, i.e., a font embedded in the CSS, and you should be able to set that in game using SetFontName, but I am only guessing; I have never tried to use an embedded font.

@ The Pixie

Will the method you just posted allow me to select a custom font from the Game -> Display options (and to switch to a custom font using SetWebFontName)?

No. I think you could add a Base64 font, i.e., a font embedded in the CSS, and you should be able to set that in game using SetFontName, but I am only guessing; I have never tried to use an embedded font.

I've confirmed that adding a Base64 font to the CSS (which I believe is a method I got from one of your previous posts) will allow you to use SetWebFontName to set a customized font (which is embedded in the CSS) via script.

Click the spoiler labeled "Code that allows you to use SetWebFontName to set a customized font" in my above post for the details.

UPDATE

I found an old forum post of Pixie's with a way to link to an external stylesheet. (The file must be in the game's main folder.)

Add this line to your User Interface Initialization Initialisation script:

addStyleSheet (GetFileData("game.css"))

As long as you have a proper CSS file named 'game.css' in your game's main folder, that line will load it right up!

(I've got a custom font in there, too. I converted it to Base64 using bash and embedded it. Works great!)

NOTE: You're better off just adding the css attribute to the game object with your css file's contents as a string (like Pixie advises). This is just one more thing that might not load properly. I only posted it for edification's sake.

Here's the port-in-progress, if you'd like to see this code in action:

http://textadventures.co.uk/games/view/rr9vezzxkeaovamsaqgxcw/they-call-ya-mister-quest-prototype-in-progress