An author's reference for Bisquixe, a tool for adding audiovisual content to Inform projects (update: linking to external files)

Authoring Inform 7
19

Using Google Fonts in a Bisquixe project

Using “web-safe” fonts extends Inform’s base capabilities significantly, but Bixquixe authors have access to many more options. In fact, the entirety of Google Fonts is at our disposal!

Bisquixe uses a specific phrase for retrieving fonts from Google Fonts.

	import-google-fonts "[your+chosen+font]&family=[another+chosen+font]";

Persons experienced with Google Fonts with CSS know that the CSS equivalent is longer:

href="https://fonts.googleapis.com/css?family=Bodoni+Moda"

Bisquixe fills most of this in already, so we need only begin with the name of a font.

	import-google-fonts "Bodoni+Moda";

Where do we get the name? It is important to note that an import-google-fonts phrase will not tolerate space characters, because it is derived from a web address. Spaces are therefore signified with the plus (+) character. As for the specific name to be used, we can verify that via simple steps.

  1. Select the font of choice.
  2. At top-right, click the Get font button.
  3. Click the < > Get imbed code at upper right.
  4. Select the @import radio button.
  5. Within the upper code box, find the family=[your+font+here] code.
  6. The text after the equal sign, a font name with + characters instead of space characters, is what must be designated in the import-google-fonts phrase.

Bisquixe adds the intial family= string to our download phrase, so we need not include it. However, if we require more fonts, we must add it ourselves. For three fonts, then, our phrase would look like this:

	import-google-fonts "[font+1]&family=[font+2]&family[font+3]";

Note, again, that there are no spaces in our text string.

By default, the character limit for our bisquixe strings is 64 characters. Unless we increase it by using the code in this post, we will likely be restricted to three fonts.

Once downloaded, they can be assigned to the font-family property in the way that we have done before, either as game-wide CSS or as an inline setting.

	css-set-fast ".GridWindow; font-family; Roboto Mono, monospace";

In this case, fonts do include space characters, so care must be taken to verify phrasing.