Guia do Usuário Cancelar

Adicionar fontes ao seu site

  1. Guia do usuário do Adobe Fonts
  2. Introdução
    1. Requisitos de sistema e assinatura
    2. Suporte a navegador e sistema operacional
    3. Adicionar fontes ao computador
    4. Adicionar fontes ao seu site
    5. Adicionar fontes na Creative Cloud para dispositivos móveis
  3. Licenciamento de fontes
    1. Licenciamento de fontes
    2. Gerenciar sua conta
    3. Licenciamento para clientes da Creative Cloud para corporações
    4. Adicionar licenças de fonte à sua conta
    5. Remover fontes da biblioteca de assinaturas
    6. Adobe Fonts não disponível para Adobe IDs registradas na China
    7. Por que essas fontes não estão incluídas na minha associação à Creative Cloud?
    8. Remoção de fontes da Morisawa em setembro de 2021
  4. Obter e usar fontes
    1. Usar o Adobe Fonts em aplicativos da Creative Cloud
    2. Gerenciar suas fontes
    3. Resolver problemas de fontes ausentes em aplicativos de desktop
    4. Usar fontes no InDesign
    5. Fontes e tipografia
    6. Usar fontes da Web em documentos HTML5 Canvas
    7. Usar fontes no InCopy
    8. Usar fontes da Web no Muse
    9. Empacotar arquivos de fonte
    10. Guia de solução de problemas: adição de fontes
    11. As fontes adicionadas não aparecem no menu de fontes
    12. “Não foi possível adicionar uma ou mais fontes” ou “Uma fonte com este nome já está instalada”
    13. O que ocorre quando uma fonte que estou usando é atualizada pelo fornecedor?
  5. Web design e desenvolvimento
    1. Adicionar fontes ao seu site
    2. Guia de solução de problemas: adicionar fontes a um site
    3. Solução de problemas de fontes
    4. Usar fontes da Web em emails ou informativos HTML
    5. Usar fontes da Web em páginas aceleradas para dispositivos móveis (AMP)
    6. Seletores CSS
    7. Personalizar o desempenho das fontes da Web com configurações de exibição de fontes
    8. Códigos incorporados
    9. Subdivisão dinâmica e serviço de fontes da Web
    10. Eventos de fonte
    11. Por que minhas fontes da Web são de use.typekit.net?
    12. O site não consegue se conectar a use.typekit.net
    13. Usar fontes da Web com o CodePen
    14. Suporte a navegador e sistema operacional
    15. Domínios
    16. Usar fontes da Web no desenvolvimento local
    17. Política de segurança de conteúdo
    18. Imprimir fontes da Web
  6. Idiomas compatíveis e recursos OpenType
    1. Compatibilidade e subdivisão de idiomas
    2. Usar recursos OpenType
    3. Sintaxe para recursos OpenType em CSS
  7. Tecnologia de fontes
    1. Fontes coloridas OpenType-SVG
    2. Ten Mincho: pontos importantes ao atualizar da versão 1.000

As fontes da Web do Adobe Fonts podem ser usadas em seus sites, campanhas de email HTML, artigos no formato AMP do Google e muitos outros projetos com os quais as fontes da Web são compatíveis.

O serviço da Web Adobe Fonts exige que as fontes da Web sejam usadas por meio do código incorporado que elas fornecem. Os Termos de uso não permitem que você hospede os arquivos de fontes da Web ou os carregue em uma plataforma de design de sites.

Escolher fontes para usar

Comece navegando pela biblioteca de fontes. Você pode escolher o suporte ao idioma necessário no menu suspenso IDIOMAS E SISTEMAS DE ESCRITA.

A interface online de fontes é exibida com as configurações de idioma em destaque
Selecione o menu Idiomas e sistemas de escrita para encontrar o menu de filtros de idioma para fontes

Adicione tags ou filtros para refinar a lista de fontes. Use nossas tags de linguagem natural para pesquisar fontes adequadas ao seu projeto ou filtre por classificação (como serifa ou sem serifa), propriedades (altura, largura ou espessura) ou idioma. 

Pesquisa por tag no Adobe Fonts

Criar um projeto da Web

Quando encontrar uma fonte de que goste, clique no botão </> para adicionar a família a um projeto da Web.

uma imagem de fontes Gilbert é exibida com a opção Adicionar família destacada

Você também pode clicar no nome da fonte para abrir a página da família e ver todas as espessuras e estilos de fonte disponíveis para uso. Em seguida, clique em </> Adicionar ao projeto da Web na parte superior da página para adicionar a família a um projeto da Web.

adicionar famílias de fontes e escolher o estilo e a espessura da fonte na página de fontes

Na janela Adicionar fontes a um projeto da Web, você dará um nome para seu projeto da Web e decidirá quais fontes devem ser incluídas.

  1. Clique no menu e escolha “Criar um novo projeto”.
  2. Dê um nome para seu projeto da Web.
  3. Use as caixas de seleção para escolher as espessuras e os estilos de fonte que você deseja incluir.
  4. Crie o projeto.

É possível fazer alterações nas configurações do projeto na página Gerenciar fontes posteriormente.

Uma imagem de um pop-up em que fontes são selecionadas para adição a um novo projeto pela página de fontes

Em seguida, você receberá o código incorporado para carregar as fontes no seu site. As diferentes opções são explicadas na página de ajuda do código incorporado, e o código incorporado padrão funciona bem para a maioria dos projetos.

Copie o código incorporado e adicione-o à tag <head> no seu site.

O código incorporado de fontes é exibido na imagem com os estilos de fontes

Clique em Concluído para fechar a janela do projeto da Web e continuar navegando. Para adicionar mais fontes ao seu projeto, clique no botão </> em outra família de fontes e escolha o nome do seu projeto no menu (em vez de “Criar um novo projeto”).

Personalizar seu projeto da Web

O projeto da Web e todas as fontes adicionadas a ele serão listadas em Gerenciar fontes.

Clique no botão Editar projeto para alterar quais espessuras e estilos de fontes são incluídos, remover completamente uma família de fontes da Web do projeto ou definir uma configuração de exibição de fontes. Você também pode alterar o conjunto de caracteres no editor de projetos da Web, que especifica o suporte ao idioma do projeto.  

As fontes do leste asiático devem ser oferecidas com subdivisão dinâmica, enquanto outras fontes têm opções de subdivisão baseadas no idioma: padrão, todos os caracteres ou uma subdivisão de idiomas personalizada. A página de ajuda Compatibilidade e subdivisão de idiomas tem mais informações sobre as diferentes opções.

Você pode incluir recursos OpenType no projeto marcando a caixa “Recursos OpenType”. Marcar essa caixa também mostra a lista dos recursos disponíveis para essa família de fontes da Web específica, como ligaduras, caracteres alternativos ou versalete.

A exibição de fontes permite que você especifique como as fontes da Web são carregadas no navegador e aplicadas ao seu site. Mais informações sobre essas opções estão disponíveis em nossa página de ajuda Configurações de exibição de fontes.

Quando o projeto estiver configurado da maneira que deseja, clique em “Salvar alterações” para salvar o projeto. As atualizações estarão disponíveis para uso em seu site em alguns minutos.

Aplicar as fontes no seu CSS

A página Projeto da Web lista o nome de família de fontes CSS, a espessura numérica e o estilo de fonte para cada fonte no projeto. Use esses nomes de família de fontes em seu CSS para aplicar as fontes ao texto.

wp-page

Receba ajuda com mais rapidez e facilidade

Novo usuário?