Come utilizzare Google Font in Draw.io?

È possibile utilizzare Google Fonts ( https://www.google.com/fonts ) in Draw.io?

Mentre draw.io non consente al meglio delle mie conoscenze di importare caratteri, volevo pubblicare ciò che funziona per me. Devi utilizzare un browser con estensione come Chrome o Firefox (sto usando Chrome per gli screenshot).

Per iniziare, ottieni l'estensione "Elegante" per il tuo browser ( Chrome , Firefox ). Quindi aprire le opzioni di estensione e fare clic sul pulsante "Scrivi nuovo stile".

Da qui avrai bisogno di:

• Inserisci un nome per il tuo stile (ho usato Disegna IO, ma tutto va bene).

• Inserisci l'URL di Google Font nella casella di testo. Volevo importare Google Material Icons in draw.io, quindi il mio esempio usa: @import url('https://fonts.googleapis.com/icon?family=Material+Icons');

  Nota: probabilmente vorrai impostare la tua "Keymap" (in basso a sinistra nell'immagine) su "base" se non lo è già. Ciò semplifica la copia / incolla.

  

• Assicurati che "Applies to field" (Sotto la casella di testo) sia impostato su "URL sul dominio" e che il valore sia "draw.io". Ciò garantirà che l'importazione venga applicata all'applicazione web draw.io. È possibile utilizzare la stessa tecnica per qualsiasi app Web che supporti caratteri personalizzati.

• Ora premi il pulsante "Salva" sotto il titolo che hai impostato inizialmente. Quando si apre draw.io, il carattere verrà importato correttamente.
• Apri draw.io e fai clic su una forma.
• Nel pannello del formato (pannello predefinito sul lato destro) fai clic sulla scheda "Testo".
• Sotto il menu a discesa, seleziona "Personalizzato" e inserisci il tuo carattere (il mio era "Icone materiali") e fai clic su Applica.
• Ora sei pronto per scegliere questo tipo di carattere.

Esempio con carattere icona:

Nota sul carattere dell'icona: poiché sto usando le icone dei materiali in questa istanza, ho usato il nome dell'icona come testo (legatura del carattere). Ad esempio, per la stella ho inserito una casella di testo e inserito "stella" (come indicato nella pagina dell'icona del materiale ) e assicurato che il carattere fosse impostato su "Icone del materiale". Per i nomi con spazi assicurati di utilizzare i trattini bassi (ad es. "Star_border").

Esempio con font di testo: @import url('https://fonts.googleapis.com/css?family=Indie+Flower');

Ho in qualche modo provato le guide sopra ma non sono riuscito a farle funzionare. Ho quindi posto la domanda sulla pagina dei gruppi di google di draw.io e mi è stato comunicato che il campo personalizzato è per i caratteri installati localmente sul tuo sistema.

Ha scritto quanto segue che potrebbe aiutare qualcun altro che si è imbattuto in questo post tramite Google:

• Trova il carattere desiderato su Google Fonts
• Scarica la zip del carattere
• Segui https://www.google.com/get/noto/help/install/ su come installare il carattere sul tuo sistema
• Riavvia Chrome o il tuo browser preferito (in modo da poter caricare i caratteri).

Fai clic sul campo Carattere personalizzato e scrivi il nome del carattere che hai installato (non è necessario inserirlo tra virgolette, caratteri di sottolineatura, ecc.).

Guarda un esempio che ho allegato a https://groups.google.com/d/msg/drawio/mjJR6pRVTmo/T0Lrhr45AgAJ

Ci siamo imbattuti in questo problema incontrando difficoltà nell'aggiungere font personalizzati (in particolare un font Google) a draw.io (versione desktop). Si è scoperto che stavo usando 12.1.7, che ha un modo meno semplice per aggiungere caratteri personalizzati.

Trovato il seguente link dopo una ricerca su Google - post datato 2 dicembre 2019 - ma nessuna menzione della versione in esso. Controllato per l'aggiornamento e aggiornato draw.io alla 13.0.1, eccolo qui:

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

Questa è la richiesta di funzionalità su GitHub: https://github.com/jgraph/drawio/issues/577

Non sono stato in grado di trovare un modo per utilizzare alcuni dei più recenti caratteri Google, ma puoi utilizzare alcuni dei più comuni / popolari selezionando "personalizzato" nella sezione caratteri e digitando il nome del carattere ( ad esempio "Avenir Next", "Oswald", ecc.) e utilizzerà quindi quel tipo di carattere. Sul lato positivo, sembra anche riconoscere alcuni caratteri popolari che non sono su Google e che sarebbero costosi da acquistare (ad esempio Myriad Pro).

Puoi aggiungere il link completo, quindi invece di digitare "Heebo" nel campo personalizzato, puoi digitare <\link href="https://fonts.googleapis.com/css?family=Heebo:500" rel="stylesheet"\>. Funziona ancora un po 'quando si cambia il carattere dopo, ma mi ha spinto oltre.

Oppure .. basta andare alla scheda 'stile' e fare clic su 'modifica' stile. Aggiungi il link sopra e cambia la famiglia di caratteri.