8

Is it possible to use Google Fonts (https://www.google.com/fonts) in Draw.io?

7

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.

Write New Style

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.

    enter image description here

  • 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: Example 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'); enter image description here

  • Awesome hack! I'll be using this a ton in the future – Oneezy Nov 19 '17 at 23:24
5

I somewhat tried the guides above but couldn't get them to work. I then asked the question on draw.io's google groups page, and was informed that the custom field is for locally installed fonts on your system.

Wrote the following which might help someone else who came across this post via google:

  • Find the font you want on Google Fonts
  • Download the zip of the font
  • Follow https://www.google.com/get/noto/help/install/ on how to install the font on your system
  • Restart Chrome or your browser of choice (so the fonts can be loaded in).

Click on the Custom font field, and write the name of the font you've installed (There's no need to put it in quotes or underscores etc).

See an example I've attached to https://groups.google.com/d/msg/drawio/mjJR6pRVTmo/T0Lrhr45AgAJ

1

I haven't been able to figure out a way to use some of the newer Google fonts, but you can use some of the more common/popular ones by selecting "custom" under the fonts section, and typing the name of the font (e.g. "Avenir Next", "Oswald", etc) and it will then use that font. On the bright side, it also seems to recognize certain popular fonts that are not on Google fonts and would be costly to purchase (e.g. Myriad Pro).

0

You can add the full link, so instead of just typing 'Heebo' in the custom field, you can type <\link href="https://fonts.googleapis.com/css?family=Heebo:500" rel="stylesheet"\>. It still works a little buggy when changing fonts afterward, but it got me further.

Or.. just go to the 'style' tab and click 'edit' style. Add the link above and change the font-family.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.