Draw.ioでGoogleフォントを使用する方法

Draw.ioでGoogleフォント（https://www.google.com/fonts）を使用することはできますか？

draw.ioは私の知る限りではフォントのインポートを許可していませんが、自分にとって有効なものを投稿したいと思いました。ChromeやFirefoxなどの拡張機能対応ブラウザーを使用する必要があります（スクリーンショットにはChromeを使用しています）。

お使いのブラウザー（Chrome、Firefox）の「スタイリッシュな」拡張機能を入手するには、次に拡張オプションを開き、「新しいスタイルを作成」​​ボタンをクリックします。

ここから、次のものが必要になります。

• スタイルの名前を入力します（私はDraw IOを使用しましたが、何でもかまいません）。

• テキストボックスにGoogleフォントのURLを入力します。Googleマテリアルアイコンをdraw.ioにインポートしたいので、私の例では次のように使用します。 @import url('https://fonts.googleapis.com/icon?family=Material+Icons');

  注：「キーマップ」（画像の左下）が「基本」に設定されていない場合は、「基本」に設定することをお勧めします。これにより、コピー/貼り付けが簡単になります。

  

• [フィールドに適用]（テキストボックスの下）が[ドメインのURL]に設定され、値が "draw.io"であることを確認します。これにより、インポートがdraw.io Webアプリケーションに確実に適用されます。これと同じ手法を、カスタムフォントをサポートするすべてのWebアプリに使用できます。

• 最初に設定したタイトルの下にある[保存]ボタンをクリックします。draw.ioを開くと、フォントが適切にインポートされます。
• draw.ioを開き、図形をクリックします。
• フォーマットパネル（右側のデフォルトパネル）で、[テキスト]タブをクリックします。
• フォントドロップダウンの下で[カスタム]を選択し、フォント（私のものは "マテリアルアイコン"）を挿入して、[適用]をクリックします。
• これで、このフォントを選択する準備が整いました。

アイコンフォントの例：

アイコンフォントに関する注意：この例ではマテリアルアイコンを使用しているので、アイコンの名前をテキストとして使用しました（フォント合字）。たとえば、スターの場合、テキストボックスを挿入し、「スター」を（Material Icon Pageの名前に従って）挿入し、フォントが「Material Icons」に設定されていることを確認しました。スペースを含む名前の場合は、必ずアンダースコアを使用してください（「star_border」など）。

テキストフォントの例： @import url('https://fonts.googleapis.com/css?family=Indie+Flower');

上記のガイドを試してみましたが、うまく機能しませんでした。次に、draw.ioのgoogle groupsページで質問し、カスタムフィールドがシステムにローカルにインストールされたフォント用であることを知らされました。

グーグルを介してこの投稿に出くわした誰かを助けるかもしれない以下を書いてください：

• Google Fontsで目的のフォントを見つけます
• フォントのzipをダウンロード
• システムにフォントをインストールする方法については、https：//www.google.com/get/noto/help/install/に従ってください。
• Chromeまたは選択したブラウザを再起動します（フォントをロードできるようにするため）。

[カスタムフォント]フィールドをクリックして、インストールしたフォントの名前を入力します（引用符やアンダースコアなどで囲む必要はありません）。

https://groups.google.com/d/msg/drawio/mjJR6pRVTmo/T0Lrhr45AgAJに添付した例を参照してください

カスタムフォント（具体的にはGoogleフォント）をdraw.io（デスクトップバージョン）に追加するのが困難な中、これに遭遇しました。私は12.1.7を使用していたことがわかりました-カスタムフォントを追加する方法はそれほど単純ではありません。

グーグル検索の後に次のリンクが見つかりました-2019年12月2日付の投稿-バージョンの記載はありません。アップグレードを確認し、draw.ioを13.0.1にアップグレードすると、次のようになります。

https://drawio-app.com/external-fonts-in-draw-io/

これはGitHubの機能リクエストです：https : //github.com/jgraph/drawio/issues/577

新しいGoogleフォントのいくつかを使用する方法を見つけることができませんでしたが、フォントセクションで[カスタム]を選択し、フォントの名前（例：「Avenir Next」、「Oswald」など）そしてそのフォントを使用します。明るい面では、Googleフォントではなく、購入に費用がかかる特定の人気のあるフォントも認識しているようです（例：Myriad Pro）。

完全なリンクを追加できるため、カスタムフィールドに「Heebo」と入力する代わりに、と入力できます<\link href="https://fonts.googleapis.com/css?family=Heebo:500" rel="stylesheet"\>。後でフォントを変更するときにも、まだ少しバグがありますが、それはさらに私を動かしました。

または、「スタイル」タブに移動して「スタイルを編集」をクリックします。上記のリンクを追加してfont-familyを変更します。