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": "Poppins, 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 make sure that you provide the font metrics so that the lengths of text labels in SVG can be calculated. We have created the font metrics tool to help with that. Once you have generated your font metrics you can add it to the fonts list by updating _config.[js|ts]:

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

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",
  },
  ...
}));