経緯
たまにしかやらないと忘れるので diagrams.net (旧: draw.io) で Google Fonts を使用するための方法をメモ。
手順
![Google Fonts で使いたいフォントを選択する](https://labor.ewigleere.net/wp-content/uploads/2021/12/use-googlefonts-in-diagramsnet-20211223_1-1024x593.jpg)
まずはGoogle Fonts で使いたいフォントを選択します。ウェイトの一覧から選択すると右に選択済みのフォントについて Webフォント 用の HTMLタグ と css の指定が表示されるので、 css の名前をコピーします (上の画像では Noto Serif JP
)。
![diagrams.net で文字列を入力](https://labor.ewigleere.net/wp-content/uploads/2021/12/use-googlefonts-in-diagramsnet-20211223_2.jpg)
続いて diagrams.net で文字列を入力します。
![カスタムを選択](https://labor.ewigleere.net/wp-content/uploads/2021/12/use-googlefonts-in-diagramsnet-20211223_3.jpg)
この文字列を選択した状態で、右のメニューから「テキスト」タブ→「フォント」のプルダウンを開き、「カスタム…」を選択。
![フォントを指定するダイアログ](https://labor.ewigleere.net/wp-content/uploads/2021/12/use-googlefonts-in-diagramsnet-20211223_4.jpg)
ダイアログが開くので、ラジオボタンで「Google Fonts」を選択して先程 Google Fonts でコピーしたフォント名を入力し、「適用」。
![フォントが適用された](https://labor.ewigleere.net/wp-content/uploads/2021/12/use-googlefonts-in-diagramsnet-20211223_5.jpg)
これでフォントが適用されました。
フォントが変わると (特に日本語のフォントはデフォルトではないので) 見違えますね。