Aggiungere caratteri personalizzati

Questa guida ti mostrerà come aggiungere caratteri (web font) personalizzati al tuo progetto e come utilizzarli nei tuoi componenti.

Aggiungere caratteri da un file locale

Sezione intitolata Aggiungere caratteri da un file locale

In questo esempio vedremo come aggiungere un carattere personalizzato utilizzando il file di caratteri DistantGalaxy.woff.

1. Aggiungi il file del carattere alla cartella public/fonts/.

2. Aggiungi lo statement @font-face al tuo CSS. Puoi aggiungerlo in un file .css globale che importerai in seguito, in un blocco <style is:global> o in un blocco <style> nel componente o nel layout specifico in cui vuoi utilizzare questo carattere.

   /* Aggiungi il carattere personalizzato e indica al browser dove si trova. */
   @font-face {
     font-family: 'DistantGalaxy';
     src: url('/fonts/DistantGalaxy.woff') format('woff');
     font-weight: normal;
     font-style: normal;
     font-display: swap;
   }

3. Modifica il valore di font-family dello statement @font-face per modifcare lo stile degli elementi nel tuo componente o layout. In questo esempio, l’intestazione <h1> avrà un carattere personalizzato, mentre il paragrafo <p> no.

   src/pages/example.astro

   ---
   ---
   
   <h1>In a galaxy far, far away...</h1>
   
   <p>Custom fonts make my headings much cooler!</p>
   
   <style>
   h1 {
     font-family: 'DistantGalaxy', sans-serif;
   }
   </style>

Aggiungere caratteri mediante Fontsource

Sezione intitolata Aggiungere caratteri mediante Fontsource

Il progetto Fontsource semplifica l’utilizzo di Google Fonts e di altri caratteri open source fornendo moduli npm che puoi installare in base ai caratteri che decidi di utilizzare.

1. Cerca il carattere che vuoi utilizzare nel catalogo di Fontsource. In questo esempio useremo Twinkle Star.

2. Installa il package relativo al carattere scelto.

   npm

   npm install @fontsource/twinkle-star

   pnpm

   pnpm add @fontsource/twinkle-star

   Yarn

   yarn add @fontsource/twinkle-star

   Consiglio

   Puoi trovare il nome del package da utilizzare nella sezione “Quick Installation” di ogni pagina del carattere sul sito di Fontsource. È indicato con @fontsource/ seguito dal nome del carattere.

3. Importa il package del carattere nel componente in cui vuoi utilizzarlo. Di solito ha senso farlo in un layout “comune” per assicurarsi che il carattere sia disponibile in tutto il sito.

   L’importazione aggiungerà automaticamente le regole @font-face necessarie per impostare il carattere.

   src/layouts/BaseLayout.astro

   ---
   import '@fontsource/twinkle-star';
   ---

4. Utilizza il nome del carattere come valore di font-family, come mostrato nell’esempio body sulla pagina di Fontsource. Questo funzionerà in qualunque punto del tuo progetto Astro in cui puoi scrivere CSS.

   h1 {
     font-family: "Twinkle Star", cursive;
   }

Aggiungere caratteri su Tailwind

Sezione intitolata Aggiungere caratteri su Tailwind

Se stai utilizzando l’integrazione Tailwind, puoi utilizzare uno dei metodi precedenti per installare il tuo carattere, con alcuni accorgimenti. Per installare il carattere puoi aggiungere uno statement @font-face se stai usando un carattere locale oppure puoi utilizzare la strategia di importazione di Fontsource.

Puoi aggiungere il tuo carattere su Tailwind seguendo questo passi:

1. Segui una delle guide menzionate sopra saltando l’ultimo passo (quello in cui si aggiunge font-family al CSS).

2. Aggiungi il nome del carattere a tailwind.config.cjs.

   Questo esempio aggiunge Inter allo stack di caratteri sans-serif, con i caratteri di fallback di default di Tailwind CSS.

   tailwind.config.cjs

   const defaultTheme = require("tailwindcss/defaultTheme");
   
   module.exports = {
     // ...
     theme: {
       extend: {
         fontFamily: {
           sans: ["InterVariable", "Inter", ...defaultTheme.fontFamily.sans],
         },
       },
     },
     // ...
   };

   Ora, tutti i testi sans-serif (il default di Tailwind) nel tuo progetto utilizzeranno il carattere scelto. Inoltre, la classe font-sans applicherà il carattere Inter.

Per maggiori informazioni, consulta la guida alla configurazione di caratteri personalizzati di Tailwind.

Risorse aggiuntive

Sezione intitolata Risorse aggiuntive

• Impara come funzionano i web font nella guida di MDN sui web font.
• Genera il CSS per il tuo carattere con il Webfont Generator di Font Squirrel.