Как использовать Google Font в Draw.io?

Можно ли использовать Google Fonts ( https://www.google.com/fonts ) в Draw.io?

Хотя draw.io, насколько мне известно, не позволяет импортировать шрифты, я хотел опубликовать, что работает для меня. Вы должны использовать браузер с поддержкой расширений, такой как Chrome или Firefox (я использую Chrome для скриншотов).

Для начала получите расширение «Стильный» для вашего браузера ( Chrome , Firefox ). Затем откройте параметры расширения и нажмите кнопку «Создать новый стиль».

Отсюда вам понадобится:

• Введите имя для своего стиля (я использовал Draw IO, но все в порядке).

• Введите URL-адрес шрифта Google в текстовом поле. Я хотел импортировать значки материалов Google в draw.io, поэтому мой пример использует: @import url('https://fonts.googleapis.com/icon?family=Material+Icons');

  Примечание: вы, вероятно, захотите установить для своей «Keymap» (внизу слева на изображении) значение «basic», если ее еще нет. Это делает копирование / вставку проще.

  

• Убедитесь, что для параметра «Применяется к полю» (в текстовом поле) установлено значение «URL-адреса домена», а для параметра «draw.io». Это обеспечит применение импорта к веб-приложению draw.io. Вы можете использовать эту же технику для любого веб-приложения, которое поддерживает пользовательские шрифты.

• Теперь нажмите кнопку «Сохранить» под названием, которое вы изначально установили. Когда вы откроете draw.io, шрифт будет правильно импортирован.
• Откройте свой draw.io и нажмите на форму.
• На панели форматирования (панель «По умолчанию» справа) щелкните вкладку «Текст».
• Под раскрывающимся шрифтом выберите «Пользовательский» и вставьте свой шрифт (Mine был «Material Icons») и нажмите «Применить».
• Теперь вы можете выбрать этот шрифт.

Пример с Icon Font:

Примечание к шрифту значков: так как в этом случае я использую значки материалов, я использовал имя значка как текст (лигатура шрифта). Например, для звезды я вставил текстовое поле, вставил «звездочку» (по названию на странице значков материалов ) и убедился, что шрифт установлен на «Значки материалов». Для имен с пробелами обязательно используйте подчеркивание (например, "star_border").

Пример с текстовым шрифтом: @import url('https://fonts.googleapis.com/css?family=Indie+Flower');

Я несколько попробовал руководства выше, но не мог заставить их работать. Затем я задал вопрос на странице групп Google draw.io и был проинформирован о том, что настраиваемое поле предназначено для локально установленных шрифтов в вашей системе.

Написал следующее, что может помочь кому-то, кто сталкивался с этим постом через Google:

• Найдите нужный шрифт в Google Fonts
• Скачать почтовый индекс шрифта
• Следуйте https://www.google.com/get/noto/help/install/ о том, как установить шрифт в вашей системе.
• Перезапустите Chrome или ваш браузер (чтобы можно было загружать шрифты).

Нажмите на поле «Пользовательский шрифт» и напишите название шрифта, который вы установили (нет необходимости заключать его в кавычки или подчеркивания и т. Д.).

Смотрите пример, который я прикрепил к https://groups.google.com/d/msg/drawio/mjJR6pRVTmo/T0Lrhr45AgAJ

Наткнулся на это, столкнувшись с трудностью добавления пользовательского шрифта (в частности, Google Font) в draw.io (версия для ПК). Оказалось, что я использовал 12.1.7 - у которого есть менее простой способ добавить пользовательский шрифт.

Нашел следующую ссылку после поиска в Google - сообщение от 2 декабря 2019 года - но в нем нет упоминания о версии. Проверено на обновление и обновлено draw.io до 13.0.1, вот оно:

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

Это запрос функции на GitHub: https://github.com/jgraph/drawio/issues/577

Я не смог найти способ использовать некоторые из новых шрифтов Google, но вы можете использовать некоторые из наиболее распространенных / популярных, выбрав «custom» в разделе «шрифты» и введя имя шрифта ( например, «Avenir Next», «Oswald» и т. д.), и тогда он будет использовать этот шрифт. С другой стороны, он также распознает некоторые популярные шрифты, которых нет в Google-шрифтах и ​​которые будут дорогостоящими для покупки (например, Myriad Pro).

Вы можете добавить полную ссылку, поэтому вместо простого ввода «Heebo» в настраиваемое поле вы можете ввести <\link href="https://fonts.googleapis.com/css?family=Heebo:500" rel="stylesheet"\>. Это все еще работает немного глючно при смене шрифтов впоследствии, но это дало мне дальнейшее.

Или ... просто перейдите на вкладку «Стиль» и нажмите «Изменить» стиль. Добавьте ссылку выше и измените семейство шрифтов.