Adicionar fontes ao seu site

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 tipos de projetos nos quais fontes da Web têm suporte.

 

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.

Página de navegação do Adobe Fonts

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.

Criar um projeto da Web usando um cartão de fonte

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 um novo projeto de fontes da Web usando a página da família 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 Meu Adobe Fonts posteriormente.

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.

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 Meu Adobe Fonts.

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.  

wp-page

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

Logotipo da Adobe

Fazer logon em sua conta