Guia do Usuário Cancelar

Códigos incorporados

Pesquisar

Última atualização em 06/05/2021

O código incorporado está relacionado a como as fontes da Web são carregadas em seu site no navegador ou em um email HTML no cliente de email.

Os códigos incorporados padrão e @import usam CSS apenas para o carregamento de fontes (sem JavaScript); eles podem ser usados para adicionar fontes a páginas da Web, emails ou informativos HTML, Google AMP e a muitos outros tipos de projeto compatíveis com fontes da Web. O carregamento de fonte JavaScript é usado para subdivisão dinâmica, que é necessária para o serviço de fontes da Web no Leste Asiático.

O código incorporado para cada um de seus projetos pode ser encontrado na página de projetos da Web.

Código incorporado padrão

Código incorporado padrão é uma única tag <link> que carrega o CSS do projeto da Web da rede de fontes (use.typekit.net) no navegador.

<link rel="stylesheet" href="https://use.typekit.net/xxxxxxx.css">

Para encontrar o código incorporado padrão de seu projeto, visite a página de projetos da Web. Adicione esse código incorporado à tag <head> em seu site.

Código incorporado @import

O código incorporado @import pode ser usado diretamente em sua folha de estilo CSS. Para encontrar o código incorporado @import de um projeto, visite a página de projetos da Web e clique na opção “@import link”.

Adicione-o entre as tags style na <head> de seu site:

<style>
  @import url("https://use.typekit.net/xxxxxxx.css");
</style>

ou na parte superior de seu arquivo CSS:

Observação:

Se você usar o código incorporado @import, ele deverá estar no início da tag <style>, porque do contrário o arquivo CSS com qualquer outra declaração @import ou as fontes não serão carregadas. Apenas uma entrada @charset pode ser listada antes das linhas @import.

Ao usar uma das opções de código incorporado CSS, o resto da página pode não ser exibido enquanto o CSS da fonte da Web não terminar de carregar. O comportamento varia entre os navegadores, dependendo de como cada um lida com arquivos CSS externos.

Para obter um carregamento de fontes assíncrono que não bloqueia o resto da página, inclua outra biblioteca JavaScript com o código incorporado CSS para personalizar o carregamento de fontes.

Código incorporado JavaScript.

O código incorporado JavaScript é necessário para a subdivisão dinâmica, que é usada para o serviço de fontes da Web no Leste Asiático.

<script>
  (function(d) {
    var config = {
      kitId: 'xxxxxxx',
      scriptTimeout: 3000,
      async: true
    },
    h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
  })(document);
</script>

O código incorporado JavaScript para projetos dinâmicos está listado na página de projetos da Web.

O código incorporado avançado pode ser personalizado passando um objeto de configuração para o método Typekit.load. Consulte a seção API JavaScript para obter informações detalhadas.

API JavaScript

O JavaScript expõe uma variável global Typekit com um carregamento de método público. Se “Typekit.load” for chamado sem nenhum argumento, o carregamento de fontes será ativado.

Typekit.load()

Você também pode passar um objeto de configuração para Typekit.load.

Typekit.load({
      // configuration…
 });

Os retornos de chamada a seguir podem ser especificados:

loading: esse retorno de chamada é acionado quando todas as fontes são solicitadas.
active: esse retorno de chamada é acionado quando as fontes são renderizadas.
inactive: esse retorno de chamada é acionado quando o navegador não é compatível com fontes vinculadas *ou* quando nenhuma das fontes pode ser carregada.
fontloading: esse retorno de chamada é acionado uma vez para cada fonte carregada. O retorno de chamada é feito com o nome da família como primeiro argumento e a descrição da variação da fonte como segundo argumento.
fontactive: esse retorno de chamada é ativado uma vez para cada fonte renderizada. O retorno de chamada é feito com o nome da família como primeiro argumento e a descrição da variação da fonte como segundo argumento.
fontinactive: esse retorno de chamada será ativado se a fonte não puder ser carregada. O retorno de chamada é feito com o nome da família como primeiro argumento e a descrição da variação da fonte como segundo argumento.

Alterar o código incorporado em um site

Se o site já estiver usando fontes por meio de um código incorporado JavaScript herdado, você poderá mudar para a versão CSS mais recente substituindo as tags <script> em seu código pelo código incorporado HTML <link> ou pelo código incorporado CSS @import.

Usar código incorporado herdado em um site

Embora a Adobe altere ocasionalmente as opções de código incorporado à medida que fazemos melhorias no serviço de fontes, todas as versões anteriores dos códigos incorporados continuam funcionando.

Se você estiver usando um código incorporado herdado em seu site, não é necessário mudar isso. No entanto, muitos sites podem se beneficiar com as melhorias de desempenho se forem atualizados para uma versão mais recente.

As versões anteriores do código incorporado incluem uma versão JavaScript que carrega o arquivo CSS de forma assíncrona:

<script src="https://use.typekit.net/xxxxxxx.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

e uma versão JavaScript relativa a protocolo:

<script src="//use.typekit.net/xxxxxxx.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

(Mesmo se o seu site estiver usando o código incorporado relativo a protocolo, o serviço de fontes usará HTTPS para todas as solicitações.)

Usar vários códigos incorporados em um site

Não é recomendável adicionar mais de um código incorporado à mesma página da Web por vários motivos:

Toda cópia do código incorporado na maioria das vezes é redundante.
Cada projeto faz solicitações separadas de fontes, o que aumenta o número de solicitações HTTP e retarda ainda mais o carregamento.
Um único projeto pode ser armazenado em cache em todas as páginas do site após o primeiro carregamento.