Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Fonts not working?

According to the documentation, there are multiple ways to get different fonts into a story, but every single one of them hasn't worked over here.

Here's the code I have currently, where I have it set in the start passage:
(set: $Helios_Speech to (colour: #996600) + (font: "DejaVu Serif"))(set: $Oculus_Speech to (colour: red) + (font: "Terminal"))
And in usage:
$Oculus_Speech[]
and
$Helios_Speech[]
Some fonts (such as Deja Vu) work just fine and need some resizing, but others (specifically "Terminal" and "Small Fonts") just flat out won't work. Is it where the font files are placed? How I use them? What's going on here?

Comments

  • Both "Terminal" and "Small Fonts" are Windows System fonts so they are are not found on all operating system, and even on Windows they don't work in any browser except for Internet Explorer.

    You can test this by creating a local HTML file containing the following HTML and viewing it on Firefox, Chrome and IE. It should work on IE but not on the other two.
    (note: I tested using Windows 7, Firefox 34.0.5, Chrome 39.0.2171.99 m, and IE 11)

    <!DOCTYPE html>
    <html>
    <head>
    <title>Test Fonts</title>
    <style type="text/css">
    p.terminal {
    font-family: Terminal;
    }
    </style>
    </head>
    <body>
    <p>base: The quick brown fox jumped over the lazy dog.</p>
    <p class="terminal">terminal (class): The quick brown fox jumped over the lazy dog.</p>
    <p style="font-family: Terminal;">terminal (inline): The quick brown fox jumped over the lazy dog.</p>
    </body>
    </html>
    For any font to work it has to either already exist on the machine/OS or be downloaded via your HTML file (or its children files).

    I would suggest using either monospace, Courier ("Courier New"), or "Lucida Console".
    I would also suggest adding some fallback fonts to your font-family list in case the first one does not exist on the readers machine.
    eg.

    (set: $font1 to (font: "\"Courier New\", Courier, monospace"))
    $font1[This should appear in Courier New]

    (set: $font2 to (font: "\"Lucida Console\", Monaco, monospace"))
    $font2[This should appear in Lucida Console]

  • So I can only limit my fonts to three? And are the font families supposed to be entered in via "Edit Story Stylesheet"? If so, no amount of CSS seems to want to actually add in a font family.
  • When you use the (font:) macro and apply it to some text like you did in your example:

    (set: $Oculus_Speech to (colour: red) + (font: "Terminal"))
    $Oculus_Speech[The text to apply color and font to.]
    The HTML that is generated for you looks something like the following, you can see it yourself using your browser's Debugging/Inspect Element tools.
    The font-family style property indicates which font(s) you would like the browser to try to use when displaying that text.

    <tw-hook>
    <span class="" style="font-family:terminal">
    <span style="color:#e61919">This should appear in Terminal font.</span>
    </span>
    </tw-hook>
    So when I wrote (font: "\"Courier New\", Courier, monospace") I was telling the browser to try and display the text using "Courier New", if that font does not exist on the machine then next try Courier (which is the font "Courier New" is derived from), and finally if neither of the previous two fonts exist on the machine then use the operating system's built-int monospace font.

    You are not limited or required to list three fonts for each (font:) macro call, if you know that the font you want to use is one of the ones that are common to all OS that your story may be read on then you only have to list one.

    I hope that makes more sense to you.
  • EDIT: Never mind. Fonts appear to be working just fine now. Thanks for the advice!
Sign In or Register to comment.