Fonts

There are several different fonts supported directly in VTT. A given text property cannot mix elements from more than one of these fonts. The default font is Roboto.

There are several fonts available for display of regular alphabetic characters. All of the following are from the Google family of fonts, except for Handwriting. To use these fonts, change the "classes" property to one of the categories below.

• Roboto
• Handwriting
• Condensed
• Serif
• Fantasy
• Gothic
• Horror
• Tech

Another group of fonts are web-based fonts implemented through a css style-sheet using @font-face.

• @font-face

If a user declares an unlisted font, for example Arial, in the css of a widget, that font will display for a user if it is available for use in that user's browser. The only way to be sure to provide a consistent experience across a multitude of devices is to use one of the VTT defined fonts or import a font using @font-face. Even then, room designers should keep in mind that smaller displays such as tablets and phones may have a different appearance depending on how the css on a widget is structured.

Roboto

The default font in VTT is Google's Roboto. No "classes" property needs to be set. If you simply delete any font-related "classes" property, Roboto will be applied by default, But if you need to change it back programmatically, use "classes":"standard_font". Because css properties of parents are passed on to the child, all child widgets of a widget will use the same font. To restore a child widget to the Roboto font, also use "classes":"standard_font".

Within Roboto, the following options are available. The default is Regular. For more information about this font, see https://fonts.google.com/specimen/Roboto.

Name	Font-Weight	Font-Style
Black	900	Normal
BlackItalic	900	Italic
Bold	Bold	Normal
BoldItalic	Bold	Italic
Italic	Normal	Italic
Light	300	Normal
LightItalic	300	Normal
Medium	500	Normal
MediumItalic	500	Italic
Regular	Normal	Normal
Thin	100	Normal
ThinItalic	100	Italic

To use a Roboto font style other than regular, specify the font-weight or font-style in CSS. For example, to use BlackItalic:

"css":"font-weight:900; font-style:italic"

Handwriting

"classes":"handwriting_font" or "classes":"handwriting_casual_font"

VTT offers two less formal styles called handwriting and handwriting_casual. Both fonts have been created by a user of VTT and made available for use on VTT. To use a handwriting custom font, specify the font name in the classes property. For example:

Condensed

"classes":"condensed_font"

This is based on the Google Roboto font, but the kerning between characters is more condensed. Similar to Roboto, VTT offers this font in bold, bolditalic, italic, lightitalic, light, and regular styles.

Serif

"classes":"serif_font"

This is based on the Google Neuton font. Similar to Roboto, VTT offers this font in bold, italic, and regular styles.

Fantasy

"classes":"fantasy_font"

This is based on the Google Bokor font. No customization is available.

Gothic

"classes":"gothic_font"

This is based on the Google Matamorphous font. No customization is available.

Horror

"classes":"horror_font"

This is based on the Google Creepster font. No customization is available.

Tech

"classes":"tech_font"

This is based on the Google Gugi font. No customization is available.

@font-face

Google has over 1,000 fonts available under free-to-use licenses. Other fonts are also widely available. To use those, you only need to use the following css techniques as well as either have access to the font file or know the URL address where the font is available. For public library games, all fonts must be incorporated as assets on the server and external URL links are not allowed.

To put a font in your room, use the following css syntax:

"css": {
    "default": {
      "font-family": "hurricane"   
    },
    "@font-face": {
      "font-family": "hurricane",
      "src": "url(https://fonts.gstatic.com/s/hurricane/v3/pe0sMIuULZxTolZ5YldCBfe_.woff2) format('woff2')"
    }
  },

Alternatively, you can use "src": "url(/assets/-2087183141_373892)". To get the "asset" URL, upload the font file using the "Upload Token" link from the Add Widget menu or upload it as an image to any widget type that supports images. That will upload the file and give you the link. For public library games, you must use this method to avoid the external link.

To find and use a Google font, go to https://fonts.google.com. Browse for the font you want and click on it. When looking at the various styles offered, you can download the entire font family by clicking the "Download family" button at the top right of the page. That is a compressed version of the file you would upload as described in the previous paragraph. Or to just use the web-based version of the font, press the "+ Select this style button". Then click on the button in the far right upper portion of your screen that is 3 squares and a plus sign. Once that side window opens, copy the link the appears after <link href=. Copy the complete URL that appears between the quotation marks (it will likely start with "http://fonts" and end with "swap"). For example, if you were looking for the hurricane font, you would find and copy "https://fonts.googleapis.com/css2?family=Hurricane&display=swap". Paste that link into a new browser window. Then look around to find the appropriate "src" link to use in VTT. Note, you will probably need to use the "latin" variation and not "latin-ext".

Symbols

In addition to fonts, VTT also provides easy access to thousands of symbols. Some symbols can be added in the "text" property and others are added in the "image" property.

Symbols as Text

To add a symbol as text, change the "classes" property to one of the categories below. Once the "classes" property is set, put the cursor on the "text" property. A "pick an asset from the symbol picker" button will appear at the top of the JSON Editor buttons. Click that and you can view icons by category or search based on tags. Note that as stated above, it is not possible to combine regular text with a symbol font, or symbols from different fonts.

VTT-Symbols

"classes":"symbols" or "css":"font-family:VTT-Symbols"

About 200 glyphs have been incorporated into a special font with icons specifically tailored for use on VTT as either icon fonts or SVGs. To use these fonts, add a classes property or a font-family parameter as follows:

Although it is not possible to combine regular text with one of these symbols in the same widget, there is a workaround using SVGs. For example, you can create a button with the number 2 and the 3d meeple using the following:

{
  "type": "button",
  "id": "button",
  "width": 60,
  "height": 50,
  "color": "white",
  "css": "padding-bottom:31px;font-size:25px;text-align:left;background-position:25px;background-size:40%",
  "image": "i/icons/meeple_3d.svg",
  "svgReplaces": {
    "currentColor": "color"
  },
  "text": "       2"
}

For an explanation of how to edit the VTT-Symbols font, see Internals Overview.

Material Symbols

• Filled: "classes":"material-symbols" or "css":"font-family:Material Symbols"
• Not Filled: "classes":"material-symbols-nofill" or "css":"font-family:Material Symbols NoFill"

Nearly 4,000 more glyphs are available through Google's Material Symbols font. VTT uses a subset of the font that limits css customization. According to Google document, you can change aspects of the font through "font-variation-settings": "'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24". However, that is not possible on VTT. The only options are for filled or not filled as specified in the "classes" property. When using the symbol picker, you are shown both filled and not filled versions. The version you choose in the picker overlay will automatically update the "classes" property as appropriate.

Noto Emoji

"classes": "emoji-monochrome"or "css":"font-family:Noto Emoji"

About 1,900 monochrome emojis are available for selection. If you use emojis, remember that each operating system and/or browser may display the emoji slightly differently.

Symbols as Images

To add a symbol as an image, put the cursor on the "image" property. A "pick an asset from the symbol picker" button will appear at the top of the JSON Editor buttons. Click that and you can view icons by category or search based on tags. You can combine symbols from images with regular text or symbols from text on the same widget.

VTT Symbols

These are the same glyphs that are available as text, but these are in an SVG format. Each of the symbols works with svgReplaces (using "currentColor" as the color to be replaced). Although you can use these as images, they are not available in the symbol picker overlay, so you must manually enter the URL in the image property. For example: "image":"i/icons/meeple_3d.svg". You can get the name of the symbol by looking at the font version of it as described above or by looking in https://github.com/ArnoldSmith86/virtualtabletop/tree/main/assets/icons.

Game-Icons.Net

Over 4,100 SVGs from https://game-icons.net/ are available for insertion. These work with svgReplaces. Try using "#000" as the color to be replaced. That should work for most of them, but if not, open the SVG file in a text editor and see what the default value is.

Noto Emoji

These are the same standard emojis as in the text version, except that these are in full color.