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

Respuestas:

7

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".

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.

    ingrese la descripción de la imagen aquí

  • 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: Fuente de ejemplo

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'); ingrese la descripción de la imagen aquí

Ryan Q
fuente
Hack impresionante! Voy a usar esto una tonelada en el futuro
Oneezy
5

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

Mate
fuente
2

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

Lalitanand Dandge
fuente
Las fuentes del sistema también funcionan a la perfección. QuicksandFuentes instaladas descargándolas de Google Fonts. System FontsOpción utilizada para configurar, por ejemploQuicksand-Thin
Lalitanand Dandge
1

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).

JLF Tech
fuente
0

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.

Wanja
fuente