I Web Fonts sono font che non sono già installati sul sistema operativo di un utente, ma sono invece ospitati sul web e scaricati dal browser per poterli utilizzare. Ti offrono la flessibilità di utilizzare qualsiasi font scelto, purché tu li fornisca come file di font (un URL o un percorso di file). Questi font sono spesso concessi in licenza, il che significa che un cliente dovrà acquistare il diritto di utilizzarli sul proprio sito.

Esistono due tipi di font che puoi aggiungere a Search:

1. Font ospitati da un fornitore di servizi di font, come Google Fonts e Adobe Fonts, che sono gratuiti e non richiedono una licenza.
   1. Riceverai uno snippet di codice dal tuo provider di hosting che includerà sia le risorse dei font che le dichiarazioni font-face per te. Si tratterà di un foglio di stile, referenziato come di seguito, con l'href che è il componente che fa riferimento ai font esterni.

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Anton&display=swap">

2. Font auto-ospitati - in genere i tuoi font proprietari, se applicabile.
   1. Si tratta di file di font che carichi in Search.
   2. I tipi di formato accettati sono:
      • WOFF (Web Open Font Format)
        • Si consiglia l'uso di questi formati poiché sono compressi per una migliore distribuzione tramite connessioni internet scadenti e sono generalmente supportati su tutti i tipi di browser.
      • WOFF2
      • TTF (TrueType)
      • OTF (OpenType)
      • EOT (Embedded OpenType)
      • SVG (Grafica vettoriale scalabile)

Per aggiungere font web al tuo sito:

1. Fai clic su Pages nella barra di navigazione e clicca sul sito desiderato.
2. Fai clic sul pulsante Visualizza editor di codice.
3. Passa il mouse sul branch master e fai clic sull'icona della matita () che appare.
4. Aggiungi i font al tuo editor di codice. Questo processo varia a seconda di come sono ospitati i font. Segui i passaggi elencati a seconda del caso:
   • Font ospitati da un fornitore di servizi di font
     1. Fai clic sulla cartella layouts.
     2. Fai clic sul file headincludes.hbs.
     3. Aggiungi gli script dei font desiderati al file.
   • Font auto-ospitati
     1. Fai clic sulla cartella static.
     2. Fai clic sulla cartella assets.
     3. Passa il mouse sulla cartella fonts, fai clic sui tre puntini (…) che appaiono e poi su Aggiungi File nel menu a discesa. Apparirà una finestra di dialogo.
     4. Seleziona Carica file esistente nel menu a discesa.
     5. Fai clic su Scegli file e seleziona il file dal tuo computer. Quindi fai clic su Aggiungi file.
        • Se hai più di un file da aggiungere, ripeti i passaggi da c a e. Tieni presente che dovrai caricare un file per ogni variante del font (ad esempio, normale, grassetto e corsivo).
     6. Fai clic sulla cartella scss nella cartella static.
     7. Fai clic sul file fonts.scss.
     8. Aggiungi le dichiarazioni font-face desiderate all'inizio del file.
        • Dovrai aggiungere una dichiarazione font-face per ogni variante/file che carichi, in questo caso normale, grassetto e corsivo.
        • L' src si riferisce al percorso del file o dei file che hai appena caricato nella cartella font.

@font-face
{
  font-family: "Robot Mono";
  src: url('../assets/fonts/robotomono-regular-webfont.woff') format("woff");
  font-weight: $font-weight-normal;
  font-style: normal;
}
@font-face
{
  font-family: "Robot Mono";
  src: url('../assets/fonts/robotomono-bold-webfont.woff') format("woff");
  font-weight: $font-weight-bold;
  font-style: normal;
}
@font-face
{
  font-family: "Robot Mono";
  src: url('../assets/fonts/robotomono-italic-webfont.woff') format("woff");
  font-weight: $font-weight-normal;
  font-style: italic;
}

5. Applica il tuo nuovo font all'esperienza di Search. Consulta l'articolo di assistenza Modifica i caratteri nel tema Frontend di Search per saperne di più.