Wie verwende ich Google Font in Draw.io?

Ist es möglich, Google Fonts ( https://www.google.com/fonts ) in Draw.io zu verwenden?

Während draw.io nach meinem besten Wissen das Importieren von Schriftarten nicht zulässt, wollte ich veröffentlichen, was für mich funktioniert. Sie müssen einen erweiterungsfähigen Browser wie Chrome oder Firefox verwenden (ich verwende Chrome für Screenshots).

Holen Sie sich zunächst die Erweiterung "Stylish" für Ihren Browser ( Chrome , Firefox ). Öffnen Sie anschließend die Erweiterungsoptionen und klicken Sie auf die Schaltfläche "Neuen Stil schreiben".

Von hier aus benötigen Sie:

• Geben Sie einen Namen für Ihren Stil ein (ich habe Draw IO verwendet, aber alles ist in Ordnung).

• Geben Sie die Google Font-URL in das Textfeld ein. Ich wollte Google Material Icons in draw.io importieren, daher verwendet mein Beispiel Folgendes: @import url('https://fonts.googleapis.com/icon?family=Material+Icons');

  Hinweis: Sie möchten wahrscheinlich Ihre "Keymap" (unten links im Bild) auf "basic" setzen, falls dies noch nicht geschehen ist. Dies vereinfacht das Kopieren / Einfügen.

  

• Stellen Sie sicher, dass das Feld "Gilt für" (unter Textfeld) auf "URLs in der Domäne" und der Wert "draw.io" festgelegt ist. Dadurch wird sichergestellt, dass der Import auf die Webanwendung draw.io angewendet wird. Sie können dieselbe Technik für jede Web-App verwenden, die benutzerdefinierte Schriftarten unterstützt.

• Klicken Sie nun unter dem ursprünglich festgelegten Titel auf die Schaltfläche "Speichern". Wenn Sie draw.io öffnen, wird die Schriftart ordnungsgemäß importiert.
• Öffnen Sie Ihre draw.io und klicken Sie auf eine Form.
• Klicken Sie in Ihrem Formatfenster (Standardfenster auf der rechten Seite) auf die Registerkarte "Text".
• Wählen Sie im Dropdown-Menü "Schriftart" die Option "Benutzerdefiniert" aus, fügen Sie Ihre Schriftart ein (meine war "Material Icons") und klicken Sie auf "Übernehmen".
• Sie können nun diese Schriftart auswählen.

Beispiel mit Symbolschrift:

Hinweis zur Symbolschriftart: Da ich in diesem Fall Materialsymbole verwende, habe ich den Namen des Symbols als Text verwendet (Schriftligatur). Beispiel: Für den Stern habe ich ein Textfeld eingefügt und "Stern" (gemäß dem Namen von der Materialsymbolseite ) eingefügt und sichergestellt, dass die Schriftart auf "Materialsymbole" eingestellt ist. Verwenden Sie für Namen mit Leerzeichen unbedingt Unterstriche (z. B. "star_border").

Beispiel mit Textschrift: @import url('https://fonts.googleapis.com/css?family=Indie+Flower');

Ich habe die obigen Anleitungen etwas ausprobiert, konnte sie aber nicht zum Laufen bringen. Ich habe dann die Frage auf der Google Groups-Seite von draw.io gestellt und wurde informiert, dass das benutzerdefinierte Feld für lokal installierte Schriftarten auf Ihrem System gilt.

Schrieb Folgendes, was jemand anderem helfen könnte, der über Google auf diesen Beitrag gestoßen ist:

• Suchen Sie die gewünschte Schriftart in Google Fonts
• Laden Sie die Zip-Datei der Schriftart herunter
• Folgen Sie https://www.google.com/get/noto/help/install/ , um zu erfahren, wie Sie die Schriftart auf Ihrem System installieren
• Starten Sie Chrome oder einen Browser Ihrer Wahl neu (damit die Schriftarten geladen werden können).

Klicken Sie auf das Feld Benutzerdefinierte Schriftart und geben Sie den Namen der installierten Schriftart ein (Sie müssen sie nicht in Anführungszeichen oder Unterstriche usw. setzen).

Sehen Sie sich ein Beispiel an, das ich an https://groups.google.com/d/msg/drawio/mjJR6pRVTmo/T0Lrhr45AgAJ angehängt habe

Ich konnte keine Möglichkeit finden, einige der neueren Google-Schriftarten zu verwenden, aber Sie können einige der gängigsten / beliebtesten verwenden, indem Sie im Abschnitt "Schriftarten" die Option "Benutzerdefiniert" auswählen und den Namen der Schriftart eingeben ( zB "Avenir Next", "Oswald" usw.) und es wird dann diese Schriftart verwendet. Auf der positiven Seite scheint es auch bestimmte beliebte Schriftarten zu erkennen, die nicht in Google-Schriftarten enthalten sind und deren Anschaffung teuer wäre (z. B. Myriad Pro).

Ich bin darauf gestoßen, als ich Schwierigkeiten hatte, eine benutzerdefinierte Schriftart (insbesondere eine Google-Schriftart) zu draw.io (Desktop-Version) hinzuzufügen. Es stellte sich heraus, dass ich 12.1.7 verwendet habe - eine weniger einfache Möglichkeit, benutzerdefinierte Schriftarten hinzuzufügen.

Fand den folgenden Link nach einer Google-Suche - Beitrag vom 2. Dezember 2019 - aber keine Erwähnung der Version darin. Auf das Upgrade überprüft und draw.io auf 13.0.1 aktualisiert, dort haben Sie es:

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

Dies ist die Funktionsanforderung auf GitHub: https://github.com/jgraph/drawio/issues/577

Sie können den vollständigen Link hinzufügen. Anstatt nur 'Heebo' in das benutzerdefinierte Feld einzugeben, können Sie auch eingeben <\link href="https://fonts.googleapis.com/css?family=Heebo:500" rel="stylesheet"\>. Es funktioniert immer noch ein wenig fehlerhaft, wenn ich danach die Schriftarten wechsle, aber es hat mich weiter gebracht.

Oder gehen Sie einfach zur Registerkarte "Stil" und klicken Sie auf "Bearbeiten". Fügen Sie den obigen Link hinzu und ändern Sie die Schriftfamilie.