Por que meu logo SVG muda de fonte?

Por que um SVG ainda pode depender de uma fonte

SVG pode armazenar texto editável e formas vetoriais. Um objeto de texto pode indicar uma fonte sem incluí-la. Se o visualizador não conseguir acessá-la, outra fonte poderá ser usada. Isso muda as formas das letras e também pode mudar a largura do logotipo.

O navegador seleciona entre as famílias de fonte disponíveis; caracteres individuais podem usar uma alternativa quando a fonte não tem um glifo necessário. Por isso, um acento, símbolo ou letra pode parecer errado mesmo quando o restante está correto. CSS também pode substituir um atributo font-family do SVG.

Converter as letras aprovadas em contornos armazena suas formas visíveis como caminhos vetoriais. O destinatário não precisa mais dessa fonte para desenhar as letras. É uma escolha útil para entregar um logo fixo, enquanto a origem editável permanece disponível para mudanças futuras.

Leitura complementar: MDN: como font-family seleciona fontes · MDN: font-family no SVG e CSS · Adobe: converter texto em caminhos vetoriais

Descubra onde as letras mudam primeiro

Mantenha a referência aprovada do logo ao lado do documento de origem e do arquivo exportado. Compare a mesma variação em tamanho semelhante. Acompanhe o arquivo da origem à exportação e ao destino para delimitar o problema antes de alterar configurações.

Confira a fonte correta antes de criar contornos

Comece com uma arte mestre editável e uma referência aprovada conhecida. Se o aplicativo informar uma fonte ausente, resolva isso primeiro. Converter a substituta em contornos fixa as formas da substituta; não recupera o design pretendido.

Por exemplo, se o logo aprovado usa um estilo semibold específico, mas a origem agora exibe regular, converter esse texto regular em caminhos preserva a espessura errada. O comando de contorno fez seu trabalho, mas a arte ainda precisa de correção.

• ✓Confirme a família, o estilo e quaisquer configurações de fonte variável conforme a origem aprovada.
• ✓Confira ortografia, acentos, pontuação, alterações personalizadas nas letras e ligaturas.
• ✓Compare o espaçamento entre letras, a linha de base e a distância entre símbolo e logotipo.
• ✓Salve a arte mestre editável separadamente. Use conversão em contornos na exportação ou uma cópia de entrega claramente nomeada.
• ✓Converta todos os elementos de texto que pertencem ao logo fixo, incluindo um slogan aprovado, se houver.

Illustrator: converta em contornos na exportação ou em uma cópia de entrega

Escolha a abordagem adequada à entrega. A conversão em contornos na exportação permite manter texto editável na arte mestre.

1. Abra a arte de origem correta e escolha File → Export → Export As; depois selecione SVG.
2. Em SVG Options, defina Font como Outlines e exporte.
3. Abra o SVG salvo em um navegador e compare com o logo aprovado.

Se precisar de uma cópia de trabalho em contornos, duplique o documento, selecione o texto do logo e escolha Type → Create Outlines. Preserve as formas das letras e seus espaços internos; não é necessário liberar caminhos compostos apenas para exportar um logotipo normal.

Está usando Save As ou Save a Copy? Nessa caixa de diálogo SVG, a opção de fonte se chama Convert To Outlines. Os nomes dos controles variam entre os fluxos de exportação.

Leitura complementar: Adobe: opções de exportação SVG · Adobe: Create Outlines · Adobe: opções de Save As SVG

Figma: mantenha Outline text ativado para o SVG

O Figma documenta a conversão de texto SVG em contornos como padrão. Confira a configuração na exportação que está realmente usando.

1. Selecione o quadro ou as camadas do logo aprovado e escolha SVG na seção Export.
2. Abra as configurações de exportação específicas do formato e mantenha Outline text ativado.
3. Exporte o SVG e inspecione o arquivo baixado.

Isso converte o texto na exportação, mantendo seu texto de origem disponível para edição. Desativar Outline text preserva a edição do texto exportado, então a disponibilidade da fonte precisa ser conferida no destino.

Continue com: Fluxo completo de exportação de logos no Figma

Leitura complementar: Figma: configurações de SVG e Outline text

Affinity: use uma cópia com texto convertido em curvas

O Affinity usa o termo Convert to Curves para transformar objetos selecionados em caminhos vetoriais editáveis. Preserve o texto na arte mestre, converta as letras aprovadas em uma cópia de entrega e inspecione o SVG exportado. Os controles de exportação diferem entre o app atual do Affinity e o Affinity Designer 2; siga o fluxo da sua versão.

Continue com: Guia de exportação de logos no Affinity

Leitura complementar: Affinity: Move Tool e Convert to Curves

Verifique o SVG real e depois seu destino

Abra o arquivo salvo ou baixado em vez de confiar na área de trabalho do design ou na prévia de exportação. Se um site processa envios ou otimiza SVGs, inspecione também o arquivo que o site realmente serve.

Teste o SVG na aplicação pretendida, incluindo um elemento de imagem ou fundo CSS. Navegadores podem restringir recursos externos quando SVG é usado como imagem, então um arquivo que parece correto em sua própria aba pode ser renderizado de forma diferente no site.

• ✓Compare letras características, acentos, ligaturas e os espaços dentro de letras como A, B e O.
• ✓Confira a largura do logotipo, o espaçamento entre letras, a linha de base e o alinhamento do símbolo.
• ✓Veja o logo no tamanho pequeno de exibição pretendido e também ampliado para inspeção.
• ✓Confira cada variação de cor aprovada no fundo pretendido.
• ✓Confirme que slogans e pequenas marcas foram incluídos e que nenhuma letra está cortada.
• ✓Peça ao destinatário que confira o arquivo exato no aplicativo ou site em que será usado.

Leitura complementar: MDN: SVG em contextos de imagem · MDN: elementos de texto em SVG

Se as letras em contornos ainda parecerem erradas

Primeiro confirme se as letras afetadas realmente são caminhos no arquivo usado. Se forem, alterar font-family não redesenhará sua geometria. Compare a primeira exportação em contornos com a origem e depois avance uma etapa por vez.

• Formas de letras erradas logo após a conversão: compare a origem com a referência aprovada e confira se uma fonte já havia sido substituída.
• Espaços internos ausentes ou formas quebradas: inspecione caminhos compostos, preenchimentos, recortes e qualquer limpeza aplicada após a conversão.
• Geometria diferente após otimização: compare com a exportação não otimizada e revise a precisão de coordenadas ou a simplificação de caminhos.
• Uma mudança apenas no site: inspecione o arquivo servido e os estilos da página, incluindo preenchimentos e traços, além do tamanho de exibição.
• Letras de fonte colorida ou efeitos especiais: confira a documentação da fonte e do app. A Adobe lista problemas específicos de exportação e contornos para fontes coloridas OpenType-SVG.

Leitura complementar: Adobe: configurações de precisão SVG · Adobe: problemas com fontes coloridas OpenType-SVG

Atenda às necessidades de edição e acessibilidade

Letras em contornos continuam sendo arte vetorial, mas seus caracteres deixam de ser texto editável comum. Guarde a arte mestre com texto editável para mudanças de redação, localização e trabalhos futuros de tipografia. A conversão também pode aumentar os dados de caminhos, então compare o tamanho final do arquivo em vez de supor uma exportação menor.

Forneça ao desenvolvedor um nome acessível adequado junto com o arquivo. Para um logo que é o único conteúdo de um link para a página inicial, um exemplo é “Início de Morrow Quay”. Se o mesmo link já tiver texto visível equivalente, evite um anúncio duplicado. As orientações do W3C sobre imagens funcionais explicam essa diferença.

Mantenha títulos comuns, texto corrido e rótulos de interface como texto real sempre que possível. Transformar o logo em caminhos não fornece, por si só, seu nome acessível nem torna o site acessível.

Confira a licença aplicável da fonte antes de incluir arquivos de fonte em uma entrega. O Adobe Fonts, por exemplo, distingue a entrega da arte finalizada da necessidade de o cliente ter sua própria licença ao acessar e editar diretamente a fonte. Outras fontes têm seus próprios termos.

Continue com: Documente fontes e necessidades de licenciamento para a entrega ao cliente

Leitura complementar: W3C WAI: logos com links acessíveis · Adobe Fonts: perguntas frequentes sobre licenciamento

Prepare o pacote da arte verificada

Quando as letras exportadas corresponderem ao design aprovado, use esse SVG verificado como ponto de partida para os arquivos do cliente. No logopack.app você pode visualizar um pacote gratuitamente; baixar o ZIP do pacote de logos exige Pro. Confira os planos atuais para detalhes de exportação.

Se o logopack.app avisar que o SVG contém texto, volte ao app de design e converta as letras aprovadas em contornos ou curvas. A correção de fonte pertence à etapa do design de origem: um gerador de pacotes não pode recuperar a tipografia pretendida a partir de um logotipo com fonte substituída.

Continue com: Escolha os arquivos de entrega do cliente · Compare formatos de arquivo de logo

Perguntas comuns sobre fontes em SVG

Leitura complementar: MDN: usar fontes em SVG