¿Cómo usar Google Font en Draw.io?

¿Es posible usar Google Fonts ( https://www.google.com/fonts ) en Draw.io?

Si bien draw.io no permite, según mi conocimiento, importar fuentes, quería publicar lo que funciona para mí. Tienes que usar un navegador con capacidad de extensión como Chrome o Firefox (estoy usando Chrome para capturas de pantalla).

Para comenzar, obtenga la extensión "Elegante" para su navegador ( Chrome , Firefox ). A continuación, abra las opciones de extensión y haga clic en el botón "Escribir nuevo estilo".

Desde aquí necesitarás:

• Ingrese un nombre para su estilo (usé Draw IO, pero todo está bien).

• Ingrese la URL de Google Font en el cuadro de texto. Quería importar los iconos de material de Google a draw.io, así que mi ejemplo usa: @import url('https://fonts.googleapis.com/icon?family=Material+Icons');

  Nota: Probablemente desee establecer su "Mapa de teclas" (abajo a la izquierda en la imagen) en "básico" si aún no lo está. Esto hace que copiar / pegar sea más simple.

  

• Asegúrese de que "Se aplica al campo" (debajo del cuadro de texto) esté configurado en "URL en el dominio" y que el valor sea "draw.io". Esto asegurará que la importación se aplique a la aplicación web draw.io. Puede usar esta misma técnica para cualquier aplicación web que admita fuentes personalizadas.

• Ahora presione el botón "Guardar" debajo del título que configuró originalmente. Cuando abra draw.io, la fuente se importará correctamente.
• Abra su draw.io y haga clic en una forma.
• En su panel de formato (Panel predeterminado en el lado derecho) haga clic en la pestaña "Texto".
• Debajo del menú desplegable de fuentes, seleccione "Personalizado" e inserte su fuente (la mía era "Iconos de materiales") y haga clic en Aplicar.
• Ahora está todo listo para elegir esta fuente.

Ejemplo con fuente de icono:

Nota sobre la fuente del icono: dado que estoy usando iconos de material en este caso, usé el nombre del icono como texto (ligadura de fuente). Por ejemplo, para la estrella, inserté un cuadro de texto e inserté "estrella" (según el nombre de la página de iconos de materiales ) y me aseguré de que la fuente estuviera configurada en "Iconos de materiales". Para nombres con espacios, asegúrese de utilizar guiones bajos (por ejemplo, "star_border").

Ejemplo con fuente de texto: @import url('https://fonts.googleapis.com/css?family=Indie+Flower');

Intenté un poco las guías anteriores pero no pude hacer que funcionen. Luego hice la pregunta en la página de grupos de google de draw.io, y me informaron que el campo personalizado es para fuentes instaladas localmente en su sistema.

Escribió lo siguiente que podría ayudar a alguien que se encontró con esta publicación a través de google:

• Encuentra la fuente que deseas en Google Fonts
• Descarga el zip de la fuente
• Siga https://www.google.com/get/noto/help/install/ sobre cómo instalar la fuente en su sistema
• Reinicia Chrome o el navegador que elijas (para que las fuentes se puedan cargar).

Haga clic en el campo Fuente personalizada y escriba el nombre de la fuente que ha instalado (no es necesario ponerla entre comillas o guiones bajos, etc.).

Vea un ejemplo que he adjuntado a https://groups.google.com/d/msg/drawio/mjJR6pRVTmo/T0Lrhr45AgAJ

Tropecé con esto mientras enfrentaba dificultades para agregar Fuente personalizada (específicamente una Fuente de Google) a draw.io (versión de escritorio). Resultó que estaba usando 12.1.7, que tiene una forma menos simple de agregar fuentes personalizadas.

Encontré el siguiente enlace después de una búsqueda en Google, publicación fechada el 2 de diciembre de 2019, pero no se menciona la versión. Verificó la actualización y actualizó draw.io a 13.0.1, ahí lo tiene:

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

Esta es la solicitud de función en GitHub: https://github.com/jgraph/drawio/issues/577

No he podido encontrar una manera de usar algunas de las fuentes más nuevas de Google, pero puede usar algunas de las más comunes / populares seleccionando "personalizado" en la sección de fuentes y escribiendo el nombre de la fuente ( por ejemplo, "Avenir Next", "Oswald", etc.) y luego usará esa fuente. En el lado positivo, también parece reconocer ciertas fuentes populares que no están en las fuentes de Google y sería costoso comprarlas (por ejemplo, Myriad Pro).

Puede agregar el enlace completo, por lo que en lugar de simplemente escribir 'Heebo' en el campo personalizado, puede escribir <\link href="https://fonts.googleapis.com/css?family=Heebo:500" rel="stylesheet"\>. Todavía funciona un poco con errores al cambiar las fuentes después, pero me llevó más lejos.

O ... simplemente vaya a la pestaña 'estilo' y haga clic en 'editar' estilo. Agregue el enlace de arriba y cambie la familia de fuentes.