Fonts

Setting font family§

By default no font-family is set. If you want to set a font, you can update _config.[js|ts] with:

site.use(oiLumeViz({
  ...
  "font": {
    "family": "ExampleFont, sans-serif"
  },
  ...
}));

When no font-family is set, the font metrics for Arial will be used for text placement. This may lead to positioning issues if the font chosen by a viewer's system is very different to Arial.

Setting font metrics§

If your visualisation text will be using a font other than "Arial", "Century Gothic", "Courier New", "Garamond", "Georgia", "Roboto", "Tahoma", "Times New Roman", "Trebuchet MS", "Verdana" you will need to update _config.[js|ts] with either:

1) Font metrics

Font metrics gives the width of every character for a given font-size. We have created the font metrics tool to help with creating static metrics.

site.use(oiLumeViz({
  ...
  "font": {
    "family": "ExampleFont, sans-serif",
    "fonts": {
      "ExampleFont": {
        "normal": {"font-size":32,"widths":[0,...]},
        "bold":{"font-size":32,"widths":[0,...]}
      },
    },
  },
  ...
}));

2) A function Since 0.16.3

Alternatively you could provide a function that returns the width (in pixels) of a given text string. Here is an overly simplistic example function but you could easily use external libraries that calculate the string width using the original font files.

site.use(oiLumeViz({
 ...
  "font": {
    "family": "ExampleFont, sans-serif",
    "fonts": {
      "ExampleFont": {
        "normal": function(txt,fs){ return txt.length * fs; },
        "bold": function(txt,fs){ return 1.2 * txt.length * fs; }
      },
    },
  },
  ...
}));

Setting font size§

The default font size is set to 16. You can change that in _config.[js|ts]:

site.use(oiLumeViz({
  ...
  "font": {
    "size": 18,
  },
  ...
}));

Setting font weight§

The default font weight is normal. You can change that in _config.[js|ts]:

site.use(oiLumeViz({
  ...
  "font": {
    "weight": "bold",
  },
  ...
}));