Guia do Usuário Cancelar

Usar fontes da Web com o CodePen

  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. Como usar fontes no Adobe Muse
    9. Usar fontes da Web no Muse
    10. Empacotar arquivos de fonte
    11. Guia de solução de problemas: adição de fontes
    12. As fontes adicionadas não aparecem no menu de fontes
    13. “Não foi possível adicionar uma ou mais fontes” ou “Uma fonte com este nome já está instalada”
    14. 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. Usar fontes da Web em emails ou informativos HTML
    4. Usar fontes da Web em páginas aceleradas para dispositivos móveis (AMP)
    5. Seletores CSS
    6. Personalizar o desempenho das fontes da Web com configurações de exibição de fontes
    7. Códigos incorporados
    8. Subdivisão dinâmica e serviço de fontes da Web
    9. Eventos de fonte
    10. Por que minhas fontes da Web são de use.typekit.net?
    11. O site não consegue se conectar a use.typekit.net
    12. Usar fontes da Web com o CodePen
    13. Suporte a navegador e sistema operacional
    14. Domínios
    15. Usar fontes da Web no desenvolvimento local
    16. Política de segurança de conteúdo
    17. 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

O CodePen é um editor de código HTML, CSS e JavaScript online que permite que você experimente o código diretamente no navegador. Você pode usar fontes da Web personalizadas diretamente no Pen.

Escolher fontes para usar

Acompanhe o tutorial de fontes da Web para escolher algumas fontes e criar seu projeto da Web.

Adicionar o código incorporado ao Pen

O código incorporado pode ser adicionado à interface do CodePen no campo “Stuff for <head>” no menu de configurações do editor de HTML ou no menu “CSS > Add External”.

Para encontrar o código incorporado padrão de seu projeto, visite a página de projetos da Web e localize o nome do projeto. Copie e cole o código incorporado CSS padrão desse projeto em um desses locais.

Uso do CodePen com o código incorporado CSS padrão

Uso do CodePen vinculando o arquivo CSS diretamente

Aplicar as fontes no seu CSS

Agora você pode usar o nome das famílias de fontes no editor CSS do Pen para que as fontes fiquem imediatamente visíveis na Visualização dinâmica.

Editor CodePen com fonte da Web aplicada

O nome da família de fontes a ser usado no CSS também está listado no projeto da Web. Leia mais sobre o uso de fontes em CSS.

Informações CSS na página do projeto da Web

Bifurcar trabalhos do Pen

Os trabalhos públicos do Pen podem ser bifurcados para que outros usuários usem seu código como base. As fontes da Web também funcionarão na caneta bifurcada.

Excluir um projeto ou cancelar sua assinatura

Se você excluir o projeto que está usando no CodePen ou cancelar sua assinatura, as fontes não estarão mais disponíveis para nenhum dos trabalhos no Pen que usam esse código incorporado. Isso inclui seu trabalho original, bem como quaisquer trabalhos bifurcados a partir dele. As fontes substitutas especificadas no CSS serão aplicadas no lugar das fontes da Web personalizadas.

 Adobe

Receba ajuda com mais rapidez e facilidade

Novo usuário?