Font di scrittura

Per non sovraccaricare il tuo sito web, WebAcappella ti permette di definire 6 font diversi.

Questi font sono di 3 tipi:

  • Font di testo standard (già installato sul tuo sistema)

  • Caratteri web (come GoogleFonts)

  • Font web personalizzati (da file gratuiti o a pagamento)

È consigliabile utilizzare al massimo uno o due font web in tutto il sito.

Ciò consentirà una visualizzazione rapida e una coerenza grafica.

../../_images/fonts_edition.webp

Carattere di testo standard

I caratteri di testo standard sono stati selezionati tra quelli che si trovano di default su quasi tutti i sistemi operativi (Arial, Times …).

Questo tipo di font non consumerà alcuna risorsa di rete, poiché esiste già sul terminale del visitatore del vostro sito.

Font di testo web personalizzato

Troverete siti che offrono file di font web (gratuiti o a pagamento).

../../_images/font_custom_edit.webp

Ecco un esempio di hosting del font “Amatic SC”

  • Inserire il nome del font “Amatic SC

  • Aggiungere i file woff e woff2 al progetto

  • Copiare il codice CSS con l’url dei file (“{{ WA_FONT_FAMILY }}” sarà sostituito automaticamente da “Amatic SC”)

/* amatic-sc-regular - latin */
@font-face {
  font-family: '{{ WA_FONT_FAMILY }}';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('{{WA_FILE amatic-sc-v24-latin-regular.woff2}}') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('{{WA_FILE amatic-sc-v24-latin-regular.woff}}') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* amatic-sc-700 - latin */
@font-face {
  font-family: '{{ WA_FONT_FAMILY }}';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('{{WA_FILE amatic-sc-v24-latin-700.woff2}}') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('{{WA_FILE amatic-sc-v24-latin-700.woff}}') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

Google Web Font

WebAcappella permette di selezionare dall’elenco dei font web offerti da Google (Google Fonts)

WebAcappella scaricherà automaticamente i file per installarli sul vostro server.

(L’installazione automatica sul server richiede una licenza WebAcappella FUSION PRO)

https://fonts.google.com/

../../_images/google_fonts.jpg