Fonts and Font Icons – ReGraph Docs

ReGraph lets you use custom fonts for text inside glyphs and labels. Font icons can be used as node icons, glyph icons (on nodes, links, annotations and combos) and label icons (inside node and annotation labels).

You can use any web font library or create custom font families for your application design.

ReGraph lets you use fonts from a variety of sources including:

Using content delivery network (CDN) link
Using a package manager to download a package
Hosting downloaded files (eg. CSS or .woff or .ttf files)

For any source, we recommend using document.fonts from the CSS Font Loading API to ensure fonts are fully loaded before rendering. This approach is used in the guides below.

Fonts

Fonts define the look of characters including letters, numbers and symbols. Many font families offer multiple font variants with different font weights or styles. ReGraph fully supports custom fonts and renders them consistently across the chart.

ReGraph uses 'sans-serif' as the default font family.

See the Advanced Node Gallery with Raleway, Montserrat and Valera Round fonts.

Adding fonts

In your project's root folder, add the font to your HTML file. We're using the Google Raleway font and a CDN link from Google Fonts to generate a script for two different font weights, 400 and 800:

For the "Hello World" app, add the script in my-regraph-app/index.html:

<!-- index.html -->

<!-- weights 400 and 800 -->
<link rel="stylesheet" type="text/css"
href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;800&display=swap" />

To use multiple font weights or styles of the same font, you must update your application's CSS with a unique @font-face declaration for each variant. If you are only using a single font weight or style, no CSS changes are needed.

If you are using a CDN link, click the link generated in the script to find the @font-face rules.

For the "Hello World" app, you can add the CSS code in my-regraph-app/src/App.css:

/* src/App.css */

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/raleway/v28/1Ptug8zYS_SKggPNyCMIT5lu.woff2') format('woff2');
}

@font-face {
  font-family: 'Raleway Bold';  /* create a unique name for this font weight */
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/raleway/v28/1Ptug8zYS_SKggPNyCMIT4ttDfA.woff2') format('woff2');
}

Import the React library in the file where your ReGraph component is declared. For the "Hello World" app, this is in my-regraph-app/src/App.jsx:

// src/App.jsx

import React from 'react';  // will be needed later

Next, set the default fontFamily in chart options. This font is used inside labels and glyphs unless a font family is explicitly set on the label/glyph in the fontFamily property.

// src/App.jsx

<Chart
  // ...
  options={{ labels: { fontFamily: "Raleway" } }}
/>

Next, define and load the fonts and start the app once the fonts have loaded. Add the following code after the App() function:

// src/App.jsx

// lazy-loads the chart after the font is available
const FontReadyChart = React.lazy(() =>
  Promise.all([
    document.fonts.load("24px 'Raleway'"),
    document.fonts.load("24px 'Raleway Bold'"),   // defined in CSS in step 2
  ]).then(() => ({
    default: App,
  }))
);

// main component (Demo) renders ReGraph chart
// rendering suspended until fonts are ready
function Demo() {
  return (
    <React.Suspense fallback="Loading fonts...">
      <FontReadyChart />
    </React.Suspense>
  );
}

export default Demo; // replaces export default App; previously in your code

The fonts are now loaded and we can use them in our chart. Update the items prop:

// src/App.jsx

<Chart
  items={{
    node1: { label: { text: "Hello World!" } },
    node2: { label: { text: "Hello Bold!", fontFamily: "Raleway Bold" }},
  }}
  options={{ labels: { fontFamily: "Raleway" } }}
/>

At the end of this step, you should see a custom font with two different weights in your app.

Font Icons

Font icons are vector-based glyphs embedded in font files, where specific character codes are mapped to icons instead of traditional letters or numbers. They are highly customizable as you can scale their size and dynamically change their color.

See the Font Awesome, Material Icons and IcoMoon stories for examples with different font icon libraries.

Adding font icons

If you don't have a ReGraph project, follow the steps in Create New ReGraph App to create a quick app with a single "Hello World" node.
This guide assumes that you are using ReGraph 5.4 or newer. To use it with older versions, see Troubleshooting.

In your project's root folder, open a new terminal and install the latest version of your icons using your preferred package manager. We're using Font Awesome Free Icons.

npm

npm install --save @fortawesome/fontawesome-free

yarn

yarn add @fortawesome/fontawesome-free

pnpm

pnpm install --save @fortawesome/fontawesome-free

In the file where your ReGraph component is declared, import the font icon families and the React library. For the "Hello World" app, this is in my-regraph-app/src/App.jsx:

// src/App.jsx

import "@fortawesome/fontawesome-free/css/all.css"; // both solid and regular style
import React from 'react';               // will be needed later

Next, set the default iconFontFamily in chart options. This is used unless a font family is explicitly set on the item/subitem in the fontFamily property.

// src/App.jsx

<Chart
  // ...
  options={{ iconFontFamily: "Font Awesome 6 Free" }}
/>

Next, define and load the fonts and start the app once the fonts have loaded. Add the following code after the App() function:

// src/App.jsx

// lazy-loads the chart after the font is available
const FontReadyChart = React.lazy(() =>
  Promise.all([                        // include both as we imported all.css in step 2
    document.fonts.load('900 16px "Font Awesome 6 Free"'),  // fas (solid, weight 900)
    document.fonts.load('400 16px "Font Awesome 6 Free"'),  // far (regular, weight 400)
  ]).then(() => ({
    default: App,
  }))
);

// main component (Demo) renders ReGraph chart
// rendering suspended until fonts are ready
function Demo() {
  return (
    <React.Suspense fallback="Loading fonts...">
      <FontReadyChart />
    </React.Suspense>
  );
}

export default Demo; // replaces export default App; previously in your code

The font icons are now loaded and we can use them in our chart. Update the items prop in the App() function:

// src/App.jsx

  items={{
    node1: { label: { text: "Hello World!" } },
    node2: {
      label: [
        { fontIcon: { text: 'far fa-handshake' } },
        {
          fontIcon: { text: 'fas fa-globe', color: '#2B65EC' },
          position: { vertical: 'inherit' },
        },
    ]},
  }}

At the end of this step, you should see two nodes in your application - one with a text label and another one with font icons.

Font icon weights

Some font icons offer multiple font weights or styles as variants of the same font family.

For example, Font Awesome Free Icons are either Regular (far) or Solid (fas), which should be specified as part of the icon's CSS class name in the text property of fontIcon.

Others, such as Material Icons or Material Symbols, can include variants such as Filled, Outlined, Rounded or Sharp, where each variant must be imported separately and specified in the fontFamily property. The text property only requires the icon's ligature string.

To use a mix of weights or styles, declare a font family for each using @font-face in your CSS and give each a unique font-family name, for example:

/* Font weight of 300 */
@font-face {
  font-family: 'Material Symbols Sharp Thin'; /* a unique name in your CSS */
  font-style: normal;
  font-weight: 300;
  src: url(https://fonts.gstatic.com/s/materialsymbolssharp/v249/gNNBW2J8Roq16WD5tFNRaeLQk6-SHQ_R00k4c2_whPnoY9ruReaU4bHmz74m0ZkGH-VBYe1x0TV6x4yFH8F-H5OdzEL3sVTgJtfbYxPVojCLJ1H7-0Hk.woff2) format('woff2');
}

/* Font weight of 700 */
@font-face {
  font-family: 'Material Symbols Sharp Thick'; /* a unique name in your CSS */
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/materialsymbolssharp/v249/gNNBW2J8Roq16WD5tFNRaeLQk6-SHQ_R00k4c2_whPnoY9ruReaU4bHmz74m0ZkGH-VBYe1x0TV6x4yFH8F-H5OdzEL3sVTgJtfbYxNspTCLJ1H7-0Hk.woff2) format('woff2');
}

See the Adding Fonts tutorial in the Fonts section for an example using @font-face rules.

The Material Icons story imports the variants as separate CDN links in the HTML tab.

Styling font icons

You can set a color as well as a custom fontFamily for the particular item's font icon inside the item's fontIcon property.

In addition, depending on the item where the font icon is used, ReGraph lets you customize its various properties:

Node icons - Use imageAlignment to position the icon and scale the icon size.
Glyph icons (on nodes, links and annotations) - Use imageAlignment to position the icon and scale the icon size.
Label icons (on nodes and annotations) - Use the properties available for node label and annotation label APIs including position or fontSize.

The example below uses Font Awesome Free Icons in Solid:

Font Icons

Troubleshooting

Font icons showing as a single letter

If you complete the Adding font icons guide and the font icons are not displayed, you might be using an older version of ReGraph. In ReGraph 5.3 or older, Web Font Loader was used as an internal dependency to load font icons. Upgrade ReGraph to the latest version and review and repeat the tutorial steps to fix this issue. If you need help upgrading, see the Updating documentation or contact [email protected].

If you complete the Adding font icons guide and the font icons are not displayed, you might be using an older version of ReGraph.

In ReGraph 5.3 or older, Web Font Loader was used as an internal dependency to load font icons. Upgrade ReGraph to the latest version and review and repeat the tutorial steps to fix this issue. If you need help upgrading, see the Updating documentation or contact [email protected].

Font icons showing as plain text

If you complete the Adding font icons guide and the font icons are showing only as the plain text specified in the `text` option, there's probably an issue with importing the font. Review and repeat the steps in the tutorial and if the issue persists, contact [email protected].

Font files loaded via CSS @import showing as a plain text

If you are importing font files using @import inside a CSS file, the validations in FontReadyChart can sometimes be executed before the CSS is processed. As a result, icons can fail to load and instead show as the plain text specified in the text option.

To fix this, include document.fonts.ready at the top of the chain of promises:

// lazy-loads the chart after the font is available
const FontReadyChart = React.lazy(() =>
  document.fonts.ready // resolves once the document has completed loading fonts
    .then(() =>
      Promise.all([ // resolves when ALL the fonts are loaded
        document.fonts.load('1em "Material Icons"'),
        document.fonts.load('1em "Material Icons Outlined"'),
      ])
    )
    .then((p) => ({
      default: App, // loads the component that includes ReGraph
    }))
);

Check the Material Icons demo for an example.

Material Icons / Material Symbols not showing

If your Google font icons are not showing, you may be using an older version of ReGraph or referencing them incorrectly. In ReGraph 5.3 or older, it was necessary to use the Unicode character of the icon, or to map the character to a class name using CSS, e.g.

.material-icons.person::before {
  content: '\e7fd';
}

And then to specify the icon:

fontIcon: {
  text: '\ue7fd',   // or 'material-icons person'
},

In ReGraph version 5.4 and newer, you can pass the ligature string of a Google fonts icon directly in the text property, such as text: 'person'.

We strongly recommend upgrading ReGraph to the latest version. If you want to continue using an older version, check that you are using the Unicode character as described.