How to use Google Font in Draw.io

While draw.io does not to the best of my knowledge allow importing fonts, I wanted to post what works for me. You have to use a extension capable browser such as Chrome or Firefox (I'm using Chrome for screenshots).

To start get the "Stylish" extension for your browser (Chrome, Firefox). Next open the extension options and click the "Write New Style" button.

From here you'll need:

• Enter a name for your style (I used Draw IO, but anything is fine).

• Enter the Google Font url in the text box. I wanted to import Google Material Icons to draw.io so my example uses: @import url('https://fonts.googleapis.com/icon?family=Material+Icons');

  Note: You will probably want to set your "Keymap" (bottom left in image) to "basic" if it is not already. This makes copy / pasting simpler.

  

• Ensure the "Applies to field" (Under text box) is set to "URLs on the domain" and the value is "draw.io". This will ensure the import is applied to the draw.io web application. You could use this same technique for any web app which supports custom fonts.

• Now hit "Save" button under the title you originally set. When you open draw.io the font will be properly imported.
• Open your draw.io and click on a shape.
• In your format panel (Default panel on the right side) click on the "Text" tab.
• Under the font drop down select "Custom" and insert your font (Mine was "Material Icons") and click apply.
• You are now all set to choose this font.

Example with Icon Font:

Note on Icon Font: Since I'm using Material Icons in this instance I used the name of the icon as text (font ligature). E.g. For the star I inserted a text box, and inserted "star" (per the name from Material Icon Page ) and ensured the font was set to "Material Icons". For names with spaces make sure to use underscores (e.g. "star_border").

Example with Text Font: @import url('https://fonts.googleapis.com/css?family=Indie+Flower');