Como usar o Google Font no Draw.io?

É possível usar o Google Fonts ( https://www.google.com/fonts ) no Draw.io?

Embora o draw.io não permita o máximo de conhecimento de importação de fontes, eu queria publicar o que funciona para mim. Você precisa usar um navegador compatível com extensões, como o Chrome ou o Firefox (estou usando o Chrome para capturas de tela).

Para começar, obtenha a extensão "Elegante" para o seu navegador ( Chrome , Firefox ). Em seguida, abra as opções de extensão e clique no botão "Write New Style".

A partir daqui, você precisará de:

• Digite um nome para o seu estilo (usei o Draw IO, mas tudo está bem).

• Digite o URL da fonte do Google na caixa de texto. Eu queria importar o Google Material Icons para draw.io, então meu exemplo usa: @import url('https://fonts.googleapis.com/icon?family=Material+Icons');

  Nota: Você provavelmente desejará definir seu "Keymap" (canto inferior esquerdo da imagem) como "básico", caso ainda não esteja. Isso simplifica a cópia / colagem.

  

• Verifique se "Aplica-se ao campo" (na caixa de texto) está definido como "URLs no domínio" e o valor é "draw.io". Isso garantirá que a importação seja aplicada ao aplicativo da web draw.io. Você pode usar essa mesma técnica para qualquer aplicativo Web que suporte fontes personalizadas.

• Agora clique no botão "Salvar" sob o título que você definiu originalmente. Quando você abre o draw.io, a fonte será importada corretamente.
• Abra seu draw.io e clique em uma forma.
• No seu painel de formato (painel Padrão no lado direito), clique na guia "Texto".
• Na lista suspensa de fontes, selecione "Personalizado", insira sua fonte (a minha era "Ícones de materiais") e clique em Aplicar.
• Agora você está pronto para escolher essa fonte.

Exemplo com fonte do ícone:

Nota sobre a fonte do ícone: Como estou usando os ícones dos materiais, neste caso, usei o nome do ícone como texto (ligadura da fonte). Por exemplo, para a estrela, inseri uma caixa de texto e inseri "estrela" (conforme o nome da Página de ícones dos materiais ) e assegurei que a fonte estivesse definida como "Ícones dos materiais". Para nomes com espaços, use sublinhados (por exemplo, "star_border").

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

Tentei um pouco os guias acima, mas não consegui fazê-los funcionar. Fiz a pergunta na página de grupos do google do draw.io e fui informado que o campo personalizado é para fontes instaladas localmente no seu sistema.

Escreveu o seguinte, que pode ajudar alguém que se deparou com esta postagem via google:

• Encontre a fonte que você deseja no Google Fonts
• Faça o download do zip da fonte
• Siga https://www.google.com/get/noto/help/install/ sobre como instalar a fonte no seu sistema
• Reinicie o Chrome ou seu navegador preferido (para que as fontes possam ser carregadas).

Clique no campo Fonte personalizada e escreva o nome da fonte que você instalou (não há necessidade de colocá-la entre aspas ou sublinhados, etc.).

Veja um exemplo que anexei a https://groups.google.com/d/msg/drawio/mjJR6pRVTmo/T0Lrhr45AgAJ

Nos deparamos com isso, enquanto enfrentamos dificuldades para adicionar a Fonte personalizada (especificamente uma fonte do Google) ao draw.io (versão para desktop). Aconteceu que eu estava usando o 12.1.7 - que tem uma maneira menos simples de adicionar fonte personalizada.

Encontrei o seguinte link após uma pesquisa no google - publicação de 2 de dezembro de 2019 - mas nenhuma menção à versão. Verificou a atualização e atualizou o draw.io para 13.0.1, você tem:

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

Esta é a solicitação de recurso no GitHub: https://github.com/jgraph/drawio/issues/577

Não consegui descobrir uma maneira de usar algumas das fontes mais recentes do Google, mas você pode usar algumas das mais comuns / populares selecionando "personalizado" na seção de fontes e digitando o nome da fonte ( por exemplo, "Avenir Next", "Oswald", etc) e usará essa fonte. Pelo lado positivo, também parece reconhecer certas fontes populares que não estão nas fontes do Google e seriam caras de comprar (por exemplo, Myriad Pro).

Você pode adicionar o link completo. Portanto, em vez de digitar 'Heebo' no campo personalizado, digite <\link href="https://fonts.googleapis.com/css?family=Heebo:500" rel="stylesheet"\>. Ainda funciona um pouco errado ao mudar as fontes posteriormente, mas isso me levou a um ponto mais alto.

Ou .. basta ir para a guia 'estilo' e clicar em 'editar'. Adicione o link acima e altere a família da fonte.