Comment utiliser Google Font dans Draw.io?

Est-il possible d'utiliser des polices Google ( https://www.google.com/fonts ) dans Draw.io?

Bien que draw.io ne permette pas à ma connaissance d'importer des polices, je voulais publier ce qui fonctionne pour moi. Vous devez utiliser un navigateur compatible avec les extensions tel que Chrome ou Firefox (j'utilise Chrome pour les captures d'écran).

Pour commencer, obtenez l'extension "Stylish" pour votre navigateur ( Chrome , Firefox ). Ouvrez ensuite les options d'extension et cliquez sur le bouton "Écrire un nouveau style".

De là, vous aurez besoin de:

• Entrez un nom pour votre style (j'ai utilisé Draw IO, mais tout va bien).

• Saisissez l'URL de la police Google dans la zone de texte. Je voulais importer Google Material Icons dans draw.io donc mon exemple utilise: @import url('https://fonts.googleapis.com/icon?family=Material+Icons');

  Remarque: Vous voudrez probablement définir votre "Keymap" (en bas à gauche dans l'image) sur "de base" si ce n'est pas déjà fait. Cela rend le copier / coller plus simple.

  

• Assurez-vous que le champ "S'applique au champ" (sous la zone de texte) est défini sur "URL sur le domaine" et que la valeur est "draw.io". Cela garantira que l'importation est appliquée à l'application Web draw.io. Vous pouvez utiliser cette même technique pour toute application Web prenant en charge des polices personnalisées.

• Maintenant, cliquez sur le bouton "Enregistrer" sous le titre que vous avez défini à l'origine. Lorsque vous ouvrez draw.io, la police sera correctement importée.
• Ouvrez votre draw.io et cliquez sur une forme.
• Dans votre panneau de format (panneau par défaut sur le côté droit), cliquez sur l'onglet "Texte".
• Sous la liste déroulante des polices, sélectionnez "Personnalisé" et insérez votre police (la mienne était "Icônes matérielles") et cliquez sur Appliquer.
• Vous êtes maintenant prêt à choisir cette police.

Exemple avec police d'icône:

Remarque sur la police des icônes: Puisque j'utilise des icônes de matériaux dans ce cas, j'ai utilisé le nom de l'icône comme texte (ligature de police). Par exemple, pour l'étoile, j'ai inséré une zone de texte et inséré "étoile" (selon le nom de la page d'icônes de matériaux ) et je me suis assuré que la police était réglée sur "Icônes de matériaux". Pour les noms avec des espaces, assurez-vous d'utiliser des traits de soulignement (par exemple "star_border").

Exemple avec police de texte: @import url('https://fonts.googleapis.com/css?family=Indie+Flower');

J'ai un peu essayé les guides ci-dessus mais je n'ai pas pu les faire travailler. J'ai ensuite posé la question sur la page google groups de draw.io, et j'ai été informé que le champ personnalisé correspond aux polices installées localement sur votre système.

A écrit ce qui pourrait aider quelqu'un d'autre qui est tombé sur ce message via google:

• Trouvez la police que vous souhaitez sur Google Fonts
• Téléchargez le zip de la police
• Suivez https://www.google.com/get/noto/help/install/ pour savoir comment installer la police sur votre système
• Redémarrez Chrome ou le navigateur de votre choix (afin que les polices puissent être chargées).

Cliquez sur le champ Police personnalisée et écrivez le nom de la police que vous avez installée (il n'est pas nécessaire de la mettre entre guillemets ou soulignements, etc.).

Voir un exemple que j'ai joint à https://groups.google.com/d/msg/drawio/mjJR6pRVTmo/T0Lrhr45AgAJ

Je suis tombé dessus tout en étant confronté à des difficultés pour ajouter une police personnalisée (en particulier une police Google) à draw.io (version de bureau). Il s'est avéré que j'utilisais 12.1.7 - qui a un moyen moins simple d'ajouter une police personnalisée.

Trouvé le lien suivant après une recherche sur google - post daté du 2 décembre 2019 - mais aucune mention de version dedans. Vérifié pour la mise à niveau et il a mis à niveau draw.io vers 13.0.1, vous l'avez:

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

Ceci est la demande de fonctionnalité sur GitHub: https://github.com/jgraph/drawio/issues/577

Je n'ai pas été en mesure de trouver un moyen d'utiliser certaines des nouvelles polices Google, mais vous pouvez utiliser certaines des plus courantes / populaires en sélectionnant "personnalisé" dans la section des polices et en tapant le nom de la police ( par exemple "Avenir Next", "Oswald", etc.) et il utilisera alors cette police. Du côté positif, il semble également reconnaître certaines polices populaires qui ne sont pas sur les polices Google et seraient coûteuses à acheter (par exemple Myriad Pro).

Vous pouvez ajouter le lien complet, donc au lieu de simplement taper 'Heebo' dans le champ personnalisé, vous pouvez taper <\link href="https://fonts.googleapis.com/css?family=Heebo:500" rel="stylesheet"\>. Cela fonctionne toujours un peu bogué lors du changement de police par la suite, mais cela m'a poussé plus loin.

Ou .. allez simplement dans l'onglet «style» et cliquez sur «modifier» le style. Ajoutez le lien ci-dessus et changez la famille de polices.