web-dev-qa-db-fra.com

Comment utiliser Google Font dans Draw.io?

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

draw.iogoogle-fonts
8
nacesprin

Bien que draw.io ne permette pas, au meilleur de ma connaissance, l’importation de 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" de votre navigateur ( Chrome , Firefox ). Ouvrez ensuite les options d’extension et cliquez sur le bouton "Ecrire un nouveau style".

Write New Style

De là, vous aurez besoin de:

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

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

    Remarque: vous voudrez probablement définir votre "Keymap" (en bas à gauche de l'image) sur "de base" si ce n'est déjà fait. coller plus simple.

    enter image description here

  • Assurez-vous que le champ "S'applique à" (Dans la zone de texte) est défini sur "URL du 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 les polices personnalisées.

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

Exemple avec Icon Font: Example Font

Note sur la police de l'icône: Depuis que j'utilise des icônes de matériau dans ce cas, j'ai utilisé le nom de l'icône en tant que texte (ligature de police). Par exemple. Pour l'étoile, j'ai inséré une zone de texte et inséré "étoile" (d'après le nom de Page d'icône de matéria ) et je me suis assuré que la police était définie sur "Icônes de matériau". Pour les noms avec des espaces, veillez à utiliser des traits de soulignement (par exemple, "star_border").

Exemple avec la police du texte: @import url('https://fonts.googleapis.com/css?family=Indie+Flower');enter image description here

7
Ryan Q

J'ai un peu essayé les guides ci-dessus mais je n'ai pas réussi à les faire fonctionner. J'ai ensuite posé la question sur la page des groupes Google de draw.io et on m'a informé que le champ personnalisé concerne les polices installées localement sur votre système.

Ce qui pourrait aider quelqu'un qui a découvert ce post via google a écrit:

  • Recherchez 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/ sur la procédure d'installation de la police sur votre système.
  • Redémarrez Chrome ou votre navigateur de 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 (inutile de la mettre entre guillemets ni caractères de soulignement, etc.).

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

5
Matt

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

1
JLF Tech

Vous pouvez ajouter le lien complet. Ainsi, 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 polices par la suite, mais cela m'a amené plus loin.

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

0
Wanja