Usar fontes da Web com o CodePen

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.

Logotipo da Adobe

Fazer logon em sua conta