Codici di incorporamento

Il codice di incorporamento è il modo in cui i font per web vengono caricati nel tuo sito Web nel browser o in un'e-mail HTML nel client di posta elettronica.

L'impostazione predefinita e i codici di incorporamento @import utilizzano solo il CSS per il caricamento dei font (non JavaScript); possono essere usati per aggiungere font a pagine Web,e-mail HTML o newsletter,Google AMP e molti altri tipi di progetti in cui sono supportati i font per web. Il caricamento dei font JavaScript viene utilizzato per la suddivisione dinamica in sottoinsiemi, richiesta per la distribuzione di font per web dell'Asia orientale.

Il codice di incorporamento per ognuno dei tuoi progetti può essere reperito sulla pagina dei progetti Web.

Codice di incorporamento predefinito

Il codice di incorporamento predefinito è un singolo tag <link> che carica il CSS del progetto Web dalla rete dei font (use.typekit.net) nel browser.

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

Per trovare il codice di incorporamento predefinito per il tuo progetto, visita la pagina dei progetti Web. Aggiungi il codice di incorporamento al tag <head> del tuo sito Web.

Codice di incorporamento @import

Il codice ci incorporamento @import può essere utilizzato direttamente nel foglio di stile CSS. Per trovare il codice di incorporamento @import per un progetto, visita la pagina dei progetti Web, quindi fai clic sull'opzione "@import link"

Aggiungilo tra i tag style nel tag <head> del tuo sito Web:

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

o posizionalo all'inizio del file CSS:

Aggiunta di @import al CSS

Nota:

Se utilizzi il codice di incorporamento @import deve trovarsi all'inizio del tag <style> o nel file CSS con tutte le altre istruzioni @import oppure i font non verranno caricati. È consentito elencare solo una voce @charset prima delle righe @import.

L'uso di una delle opzioni del codice di incorporamento CSS significa che il resto della pagina potrebbe non essere visualizzato fino al termine del caricamento del CSS dei font per web. Il comportamento varia tra i browser, a seconda di come ognuno di gestisce i file CSS esterni.

Per il caricamento asincrono dei font che non blocca il resto della pagina, includere un'altra libreria JavaScript insieme al codice di incorporamento CSS per personalizzare il caricamento dei font.

Codice di incorporamento JavaScript

Il codice di incorporamento JavaScript è richiesto per la suddivisione dinamica in sottoinsiemi, utilizzata per la distribuzione di font per web dell'Asia orientale.

<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>

Il codice di incorporamento JavaScript per un progetto dinamico è elencato nella pagina dei progetti Web.

Il codice di incorporamento avanzato può essere personalizzato passando un oggetto di configurazione al metodo Typekit.load; consulta la sezione dell'API JavaScript per i dettagli.

API JavaScript

JavaScript espone una variabile globale Typekit con un caricamento di metodo pubblico. Richiamare "Typekit.load" senza argomenti attiverà il caricamento dei font.

Typekit.load()

Puoi anche passare un oggetto di configurazione a Typekit.load.

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

È possibile specificare le seguenti chiamate:

  • Caricamento in corso - Questa chiamata viene attivata quando vengono richiesti tutti i font.
  • attivo - Questa chiamata viene attivata quando i font sono stati sottoposti a rendering.
  • inattivo - Questa chiamata viene attivata quando il browser non supporta i font collegati *oppure* se non è possibile caricare alcun font.
  • fontloading - Questa chiamata viene attivata una volta per ogni font caricato. La chiamata viene attivata con il nome della famiglia come primo argomento e la descrizione della variazione del font come secondo argomento.
  • fontactive - Questa chiamata viene attivata una volta per ogni font sottoposto a rendering. La chiamata viene attivata con il nome della famiglia come primo argomento e la descrizione della variazione del font come secondo argomento.
  • fontinactive - Questa chiamata viene attivata se il font non può essere caricato. La chiamata viene attivata con il nome della famiglia come primo argomento e la descrizione della variazione del font come secondo argomento.

Modifica del codice di incorporamento in un sito Web

Se hai un sito Web che utilizza già i font tramite un codice di incorporamento JavaScript precedente, puoi passare alla versione CSS più recente sostituendo i tag <script> nel codice con il codice di incorporamento HTML<link> o il codice di incorporamento CSS@import.

Utilizzo del codice di incorporamento precedente in un sito Web

Sebbene Adobe modifichi occasionalmente le opzioni del codice di incorporamento mentre apportiamo miglioramenti alla distribuzione dei font, tutte le versioni precedenti dei codici di incorporamento continueranno a funzionare.  

Se stai usando un codice di incorporamento precedente nel tuo sito Web, non è necessario modificarlo. Tuttavia, molti siti Web trarranno vantaggio dai miglioramenti delle prestazioni effettuando l'aggiornamento a una versione più recente.

Le versioni precedenti del codice di incorporamento includono una versione JavaScript che carica il file CSS in modo asincrono:

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

e una versione JavaScript relativa al protocollo:

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

(Anche se il tuo sito utilizza il codice di incorporamento relativo al protocollo, la distribuzione dei font utilizza HTTPS per tutte le richieste).

Utilizzo di più codici di incorporamento in un sito Web

Non consigliamo di aggiungere più di un codice di incorporamento alla stessa pagina Web per diversi motivi:

  • Ogni copia del codice di incorporamento è per lo più ridondante.
  • Ogni progetto effettua richieste separate per i font, il che aumenta il numero di richieste HTTP e rallenta ulteriormente il caricamento.
  • Un singolo progetto può essere memorizzato nella cache in tutte le pagine del tuo sito dopo il primo caricamento.
Logo Adobe

Accedi al tuo account