Como usar o Google Font no Draw.io?

Respostas:

7

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

Escrever novo estilo

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.

    insira a descrição da imagem aqui

  • 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: Fonte de exemplo

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'); insira a descrição da imagem aqui

Ryan Q
fonte
Corte impressionante! Eu vou estar usando esta uma tonelada no futuro
Oneezy
5

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

Matt
fonte
2

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

Lalitanand Dandge
fonte
As fontes do sistema também funcionam perfeitamente. QuicksandFontes instaladas baixando do Google Fonts. System FontsOpção usada para definir - por exemploQuicksand-Thin
Lalitanand Dandge
1

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

JLF Tech
fonte
0

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.

Wanja
fonte