Fonts

WebsitePack adotta un approccio privacy-first, evitando qualsiasi collegamento diretto con server esterni, come quelli di Google Fonts. Questa scelta non solo favorisce una maggiore protezione dei dati degli utenti, ma è anche in linea con le normative europee e internazionali che vietano, in alcuni casi, la trasmissione automatica di dati verso servizi terzi senza consenso esplicito.

Come utilizzare font personalizzati

Scaricare i file del font desiderato (es. .woff2) dal sito ufficiale del provider (es. Google Fonts)
Caricare i file font nella cartella: wsp-custom/fonts/
Modificare il file CSS personalizzato wsp-custom/style.css, includendo le regole @font-face con il percorso corretto ai file caricati

Esempio pratico

Supponiamo di voler utilizzare il font Outfit con vari pesi. Dopo aver scaricato i file .woff2 delle varianti che ci interessano, andremo ad aggiungere nel file style.css il seguente codice:

@font-face {
  font-display: swap;
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  src: url('https://websitepack.org/fonts/outfit-v14-latin-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  src: url('https://websitepack.org/fonts/outfit-v14-latin-500.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  src: url('https://websitepack.org/fonts/outfit-v14-latin-600.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  src: url('https://websitepack.org/fonts/outfit-v14-latin-700.woff2') format('woff2');
}

* {
  font-family: 'Outfit', Arial, sans-serif;
}

Il font verrà quindi applicato all’intero sito in modo conforme, veloce e senza dipendenze esterne.

Sviluppi futuri

Stiamo lavorando a un sistema integrato per la gestione dei font, che renderà ancora più semplice:

l’importazione di font personalizzati
la selezione di font preinstallati
l’associazione automatica di font alle varie aree del sito (titoli, testi, bottoni, ecc.)

1 mese fa

Personalizzazione