If you don’t want to use the fonts that are available by default in draw.io, you can use your own custom fonts or external fonts, such as Google’s fonts or web fonts stored on your own server. This is useful when you need to match the style guide of a publication, your company’s corporate image, or to add interest and emphasis in an infographic.

It’s easy to specify a system font, use a Google font, or even add your own custom web font by providing its URL in draw.io.

Change the font to a custom font via the text tab in draw.io

How to use a different system font

System fonts are those which are stored on your computer. To use a different system font, you’ll need to know the font’s name.

  1. Click on the shape or text that you want to change.
  2. In the Text tab of the format panel on the right, click the drop down arrow next to the font name, and click Custom (at the bottom of the list).
  3. In the font selection dialog, type the name of the new font, then click Apply. This example uses the Charter system font.
    Use a different system font in draw.io

You’ll see your changes applied to the shape or text.

How to use a Google font

To use a Google font, all you need to know is Google’s font name. This example uses the Satisfy Google font.

  1. Click on the shape or text that you want to change.
  2. Select the Text tab in the format panel if it is not active, then click on the drop down arrow next to the font name, and on Custom.
  3. Click on the Google Fonts radio button, type the name of the Google font in the Font Name text field, then click Apply.
    Use a Google font in draw.io

How to use a custom web font

You can also use your own web fonts, you’ll need a font file with the file type extension .woff, .ttf or .otf. The example below uses the italics version of the open source web font called SourceSans Pro.

  1. Host your raw web font file somewhere on the web that can be directly accessed via the browser.
  2. Click on the shape or text you want to change.
  3. Select the Text tab in the format panel, click on the drop down arrow next to the font name, then click on Custom.
    Use a custom web font in draw.io
  4. Click on the Web Fonts radio button, enter a name in the Font Name field, then enter the URL where your font file is stored. Then click Apply.

Using custom fonts in draw.io