Leia este artigo para saber como usar fontes da web do Adobe Typekit, do Edge Web Fonts e fontes da web auto-hospedadas em suas páginas da Web.

Observação:

O Adobe Muse não está mais adicionando novos recursos e suspenderá o suporte em quinta-feira, 26 de março de 2020. Para obter informações detalhadas e assistência, consulte a a página de fim de serviço do Adobe Muse.

Observação:

  O Typekit foi renomeado para Adobe Fonts e está incluído na Creative Cloud e em outras assinaturas. Saiba mais.

Como usar fontes Typekit no Adobe Muse

As fontes da web Adobe Typekit agora estão disponíveis no menu Adicionar/Remover fontes do Adobe Muse.

Você pode experimentar uma seleção limitada da biblioteca de fontes do Typekit em qualquer nível de plano Creative Cloud. Se você fez uma assinatura de plano pago, terá acesso a toda a biblioteca, com milhares de fontes. Para obter mais informações de planos de assinatura do Typekit, consulte Planos de hospedagem de fontes da web do Typekit.

Ao contrário das fontes da web auto-hospedadas, o Typekit hospeda as fontes que você decide usar no seu site. Isso significa que, se você selecionar fontes da biblioteca do Typekit e depois publicar seu site no Adobe Muse, o Typekit hospedará automaticamente as fontes e conectará sua conta do Typekit ao seu site.

Adicionar fontes Typekit no seu site

  1. No Adobe Muse, selecione Arquivo > Adicionar/Remover Web Fonts.

    FileAddRemoveWebFonts
  2. Na caixa de diálogo Adicionar Web Fonts, a guia Typekit lista todas as fontes da web disponíveis no seu tipo de conta Creative Cloud.

    AddWebFonts
  3. Procure a fonte que melhor se adapte à sua necessidade de design. Você pode usar as seguintes opções de classificação e filtro para selecionar a fonte necessária.

    • Clique no botão para classificar com base em Novidades, Mais recentes e Nomes.
    SortTypekitFonts
    • Clique em Filtro para aproveitar qualquer um dos seguintes Filtros:
      • Classificação: você pode filtrar fontes Typekit com base nas suas classificações, por exemplo, Serif, Sans Serif, Script, etc.
      • Recomendado para: filtre fontes baseado nas recomendações do Typekit para parágrafos ou títulos.
      • Propriedades: filtre baseado nas propriedades, tais como peso, largura, altura, etc.
    AddWebFontsFilters
  4. Quando você localizar uma fonte que queira usar, clique nela. Uma marca de seleção é exibida, indicando que a fonte está selecionada. Você poderá escolher várias fontes para adicionar de uma vez, se desejar. A guia Fontes selecionadas exibe todas as fontes selecionadas por você.

    SelectedTypekitWebFonts
  5. Clique em OK. A caixa de diálogo Notificação de Web Fonts é exibida, confirmando a adição das novas fontes. Selecione a opção Não mostrar novamente se desejar.

    fig_07_type
    Clique em OK para fechar a mensagem de confirmação.

    Agora, quando você usar o menu Fonte para escolher novamente a opção Fontes da Web, a lista de fontes adicionadas será exibida.

    FileAddRemoveWebFonts

Aplicar fontes Typekit ao texto

  1. No Adobe Muse, selecione o texto que deseja aplicar na fonte Typekit.

    TextForEdgeWebFont
  2. Com o texto ainda selecionado, escolha a fonte Typekit que você deseja aplicar desde o menu Fonte.

    ApplyTypekitFont

Usar Edge Web Fonts no Adobe Muse

As fontes da web permitem que você escolha centenas de fontes em uma grande biblioteca online hospedada pelo Typekit.com. A biblioteca de fontes da Web no Adobe Muse é fornecida com a sua assinatura do Adobe Muse. Você não precisa se inscrever ou comprar uma conta da Typekit para acessar as fontes e começar a usá-las em seus designs da web.

Observação: se tiver uma conta do Typekit, você verá que o conjunto de fontes da web disponíveis no Adobe Muse no momento é diferente do conjunto acessado em typekit.com. As fontes da Web fornecidas no Adobe Muse são gratuitas, sem restrições e não exigem uma conta no Typekit. As fontes da web oferecidas com uma conta da Typekit são restritas e têm seu acesso controlado. As versões futuras do Adobe Muse permitirão acessar a biblioteca de fontes do Typekit dentro da área de trabalho do Adobe Muse, mas esse recurso ainda não está disponível.

Os benefícios do uso de fontes da Web são:

  • É possível escolher fontes muito exclusivas e com estilos singulares para aplicar ao conteúdo de texto, mesmo que você não tenha as fontes instaladas no computador.
  • As fontes da Web que são aplicados ao texto são vinculadas às páginas automaticamente quando você publica, exporta ou visualiza o site.
  • As fontes são hospedadas pelo Typekit.com. Quando os visitantes visualizam o site ao vivo em um navegador, a fonte é baixada em segundo plano para exibir o texto.

No raro caso de os servidores do Typekit estarem indisponíveis para o carregamento da fonte aplicada dinamicamente à medida que as páginas são carregadas, o conteúdo de texto ainda será exibido com o uso de uma fonte de backup padrão. Esse cenário é muito improvável, mas é bom observar que o conteúdo de texto ainda poderá ser lido pelos visitantes em qualquer caso e o site não exibirá uma mensagem de erro.

Tenha cuidado ao adicionar fontes da Web ao design. Se você adicionar fontes da web demais, os visitantes enfrentarão tempos de download maiores, o que poderá tornar os sites muito mais lentos, afetando a experiência geral do usuário. Com isso em mente, limite seus designs à aplicação de 1 ou 2 famílias de fontes com 4 estilos por família. Como as fontes da web são recursos remotos (assim como imagens e vídeo), elas devem ser baixadas no cache do navegador dos visitantes durante a visualização das páginas de um site.

Outro recurso é que o Adobe Muse controla todas as fontes da Web que são usadas em um site. Se você remover uma fonte da Web que esteja em uso para um arquivo .muse, a fonte da Web permanecerá na lista no menu Fonte na próxima vez em que o arquivo .muse for aberto. Assim, não será possível remover acidentalmente uma fonte da Web que seja necessária para o site e você não terá que monitorar manualmente as fontes usadas durante o design das páginas.

Adicionar Edge Web Fonts a um projeto do Adobe Muse

Siga estas etapas para adicionar uma nova fonte da Web:

Uma nova janela é exibida, indicando a biblioteca de fontes da Web.

  1. Use a ferramenta Texto para selecionar um texto em um quadro de texto.

  2. Use o menu Fonte (no painel de controle ou no painel Texto) para escolher Fontes da Web > Adicionar fontes da Web...

    EdgeWebFontsLibrary
    A biblioteca de fontes da web permite acessar centenas de fontes que você pode aplicar às páginas.

    Clique nos filtros na parte superior da página para escolher o estilo de fonte que você deseja adicionar. Ou use o campo Pesquisar para localizar uma fonte pelo nome.

  3. Quando você localizar uma fonte que queira usar, clique nela. Uma marca de seleção é exibida, indicando que a fonte está selecionada. Você poderá escolher várias fontes para adicionar de uma vez, se desejar.

    SelectedEdgeWebFonts
    Clique nas fontes que você deseja adicionar; uma marca de seleção indica que elas estão selecionadas.

    Clique no botão de linha única ou várias linhas perto do lado superior direito para exibir as fontes mais adequadas para cabeçalhos e parágrafos.

    EdgeWebFontsFilters
    Exiba a lista de fontes que funcionam bem para aplicar estilos ao texto de cabeçalho.

    Se você clicar no botão de marca de seleção na extremidade direita, a janela exibirá a lista de fontes selecionadas. Se você mudar de ideia e decidir não adicionar uma fonte, clique no nome da fonte novamente para desmarcá-la.

    A caixa de diálogo Notificação de fontes da Web é exibida, confirmando a adição das novas fontes.

  4. Quando tiver concluído a seleção das fontes que deseja adicionar, clique em OK.

  5. Clique em OK.

    Se desejar, marque a caixa de seleção Não mostrar novamente.

    fig_07_type
    Clique em OK para fechar a mensagem de confirmação.

    Agora, quando você usar o menu Fonte para escolher novamente a opção Fontes da Web, a lista de fontes adicionadas será exibida.

    EdgeWebFonts
    Escolha Adicionar fontes da web na seção Web Fonts no menu Fontes.

Adicionar e aplicar Edge Web Fonts

  1. No Adobe Muse, selecione o texto onde deseja aplicar a Edge Web Font.

    TextForEdgeWebFont
  2. Com o texto ainda selecionado, selecione a Edge Web Font que você deseja aplicar desde o menu Fonte.

    ApplyEdgeWebFonts

Usar Web Fonts auto-hospedadas no Adobe Muse

O recurso Web Fonts auto-hospedadas permite acessar e usar fontes da web que você poderia comprar de outros provedores. Determinadas fontes da web podem não estar disponíveis no computador ou dispositivo de cada visitante do site. Nesse cenário, dependendo do mecanismo de texto do navegador, uma fonte da web segura será usada em vez disso, o que pode afetar consideravelmente a aparência do seu site.

Fontes da web devem ser baixadas de um servidor, como aquele hospedado pelo Adobe Edge Web Fonts (suportado pelo Typekit). Como alternativa, elas podem ser mantidas no mesmo servidor da web que hospeda o conteúdo de seu site. A abordagem de hospedagem e de renderização de fontes da web em tempo real durante uma visita ao site é chamada de auto-hospedagem, e as fontes obtidas dessa forma são chamadas de Web Fonts auto-hospedadas.

Pré-requisitos

Os tipos de fontes a seguir são necessários ao se trabalhar com fontes da web auto-hospedadas:

Fontes de sistema

são necessárias para criar sua página da web no Adobe Muse. Ao comprar uma fonte da Web, verifique se você baixou e instalou adequadamente as fontes para desktop licenciadas. O Adobe Muse oferece suporte aos seguintes formatos de fonte:

  • True Type Font (.ttf)
  • Open Type Font (.otf)
  • True Type Collections (.ttc)
  • Mac Data Fork Fonts (.dfont)
  • Mac Resource Fork TrueType Suitcases

Web Fonts

são usadas para renderizar o site no navegador. O Adobe Muse precisa que você obtenha os seguintes formatos de fonte para renderizar a fonte em todos os navegadores:

  • Web Open Font Format (.woff)
  • Embedded OpenType (.eot)
  • Scalable Vector Graphics (.svg). Esse formato é necessário para dispositivos Android mais antigos.

 

Adicionar Web Fonts auto-hospedadas

  1. SelecioneArquivo> Adicionar/remover fontes da Webpara ativar a caixa de diálogo Adicionar Fontes da Web.

  2. Na caixa de diálogo Adicionar fontes da Web, selecione a guia Web Fonts auto-hospedadas.

    SelfHostedWebFontsDialog
  3. Procure e selecione a pasta que contém a fonte ou arraste a fonte para a caixa de diálogo Adicionar Web Fonts. Ao localizar fontes da Web, o Adobe Muse exibe um alerta. Se você adicionou fontes da web no passado, clique no botão + Adicionar fontes para continuar.

    SelfHostedWebFontsFound
  4. O Adobe Muse procura por arquivos de fontes da web na pasta especificada e os combina automaticamente à sua fonte de sistema correspondente. Confirme que você licenciou corretamente a fonte da web e clique em Continuar.

  5. O modo de gerenciamento é ativado automaticamente, e as fontes da web que foram adicionadas são exibidas.

    ManageModeSelfHostedWebFonts

Gerenciar Web Fonts auto-hospedadas

O modo de gerenciamento exibe uma lista de todas as fontes da web auto-hospedadas com as fontes de desktop correspondentes. Fontes recém-adicionadas aparecem em balões na parte superior da lista, assim como os arquivos de fontes ausentes ou sem correspondência de desktop.

O modo de gerenciamento de fontes da web auto-hospedadas permite fazer o seguinte:

Especificar uma fonte de desktop correspondente

Às vezes, o Adobe Muse pode não corresponder automaticamente uma fonte da web com sua fonte de desktop correspondente. Nesse caso, você precisa especificar explicitamente uma correspondência para a fonte da web. Para especificar uma correspondência para uma fonte da Web, faça o seguinte:

  1. Clique no botão  para ativar a caixa de diálogo da fonte.

  2. Clique no botão Corresponder, para exibir uma lista das fontes instaladas no sistema.

  3. Selecione uma fonte do sistema correspondente rolando a lista ou filtrando por nome. Clique em OK para confirmar a correspondência.

Especificar arquivos de fontes ausentes

Se o Adobe Muse não encontrou os arquivos .eot ou .svg correspondentes a um arquivo .woff automaticamente, você pode encontrá-lo manualmente. Para localizar um arquivo de fonte ausente, clique no botão próximo à fonte. Clique em Procurar e navegue até o local do arquivo ausente. Clique em OK para adicionar o arquivo ausente.

Tarefas diversas

  • Fornecer informações sobre licença: Clique no botão próximo à fonte que você deseja editar e em Fornecer informações sobre licença. Clique em OK para concluir.
  • Excluir Fontes: Selecione a fonte que deseja excluir, clique em OK.
  • Filtrar a lista de fontes: Filtre a lista de fontes inserindo algumas ou todas as letras dos rótulos da fonte na caixa de texto Filtrar.

Se você tiver adicionado fontes da web auto-hospedadas, o modo Procurar é ativado automaticamente quando você iniciar a caixa de diálogo Adicionar Web Fonts. Este modo fornece pré-visualizações em miniatura das fontes (agrupadas por família) e permite selecionar as fontes para adicionar na lista suspensa de Fontes. (Por padrão, todas as fontes da web auto-hospedadas são adicionadas na lista suspensa Fontes, supondo que não há problemas, como arquivos de fontes ausentes ou nenhuma fonte de desktop correspondente.). Você também pode filtrar as famílias de fontes por nome ou mostrar apenas os itens selecionados. 

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online