Gestione Font - lucadileo9/template-catalog GitHub Wiki

Introduzione

La gestione dei font è un aspetto cruciale nello sviluppo di un'applicazione web, poiché influisce sull'esperienza utente e sulle prestazioni del sito. In Next.js, una soluzione moderna ed efficiente prevede l'uso di next/font/google in combinazione con variabili CSS e Tailwind CSS. Questo approccio permette di gestire più font in modo modulare, ottimizzato e flessibile.

In questa documentazione, esploreremo come implementare questa soluzione passo dopo passo, spiegando ogni componente e il suo ruolo nel sistema.

1. Soluzione con File `fonts.ts` e Integrazione con Tailwind CSS

Panoramica

Questa soluzione prevede la creazione di un file dedicato (fonts.ts) per definire e gestire i font utilizzati nel progetto. I font vengono caricati tramite next/font/google, che offre funzionalità avanzate come il caricamento lazy, l'inlining del CSS critico e il supporto per subset di caratteri specifici. Le variabili CSS vengono utilizzate per applicare i font in modo globale, mentre la configurazione di Tailwind CSS consente di usarli anche tramite classi di stile.

Passaggi Implementativi

1. Creazione del File `fonts.ts`

Il primo passo consiste nel creare un file dedicato (fonts.ts) per definire i font. Questo file centralizza la configurazione dei font, rendendo il codice più pulito e facile da mantenere. Per convenzione ("nostra") inseriamolo nella cartella styles

Esempio di fonts.ts:

import { Cormorant_Garamond, Quicksand } from 'next/font/google';

// Definizione del font Cormorant Garamond
const cormorant = Cormorant_Garamond({
  subsets: ['latin'], // Specifica il subset di caratteri
  weight: ['400', '600'], // Specifica i pesi del font
  variable: '--font-cormorant', // Associa il font a una variabile CSS
  display: 'swap', // Assicura il rendering corretto durante il caricamento
});

// Definizione del font Quicksand
const quicksand = Quicksand({
  subsets: ['latin'],
  weight: ['400', '600'],
  variable: '--font-quicksand',
  display: 'swap',
});

// Esportazione dei font
export const fonts = {
  cormorant,
  quicksand,
};

Spiegazione:

Cormorant_Garamond e Quicksand: Sono i font importati da next/font/google.
subsets: Specifica il subset di caratteri (ad esempio, latin).
weight: Definisce i pesi del font (ad esempio, 400 per normale e 600 per semi-grassetto).
variable: Associa il font a una variabile CSS (ad esempio, --font-cormorant), che può essere usata nei file CSS o nei componenti React.
display: 'swap': Garantisce che il testo venga visualizzato immediatamente con un font di fallback mentre il font principale viene caricato.

2. Applicazione dei Font nel Layout

Una volta definiti i font nel file fonts.ts, è necessario applicarli al layout dell'applicazione. Questo avviene nel file layout.tsx, dove le variabili CSS vengono aggiunte all'elemento <html>.

Esempio di layout.tsx:

import '@estetista/styles/globals.css';
import Header from '@estetista/components/molecules/Header';
import Footer from '@estetista/components/molecules/Footer';
import { fonts } from '@estetista/styles/fonts';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <>
      <html lang="it" className={`${fonts.cormorant.variable} ${fonts.quicksand.variable} estetista-theme`}>
        <body>
          <div className='relative flex flex-col min-h-screen'>
            <Header />
            <main className='flex-grow container mx-auto'>{children}</main>
            <Footer />
          </div>
        </body>
      </html>
    </>
  );
}

Spiegazione:

className={${fonts.cormorant.variable} ${fonts.quicksand.variable}``: Applica le variabili CSS (--font-cormorant e `--font-quicksand`) all'elemento ``, rendendo i font disponibili globalmente.
estetista-theme: Una classe aggiuntiva che può essere usata per applicare stili tematici al sito.
ATTENZIONE!!! Tutto questo serve solo per fornire la variabile css legata al font, ancora non viene applicato niente!!!

3. Configurazione dei Font in `tailwind.config.js`

Per utilizzare i font definiti in fonts.ts anche con Tailwind CSS, devi integrarli nella configurazione di Tailwind. Questo ti permette di applicare i font direttamente tramite classi di stile.

Esempio di tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        cormorant: ['var(--font-cormorant)', 'serif'], // Usa la variabile CSS per Cormorant
        quicksand: ['var(--font-quicksand)', 'sans-serif'], // Usa la variabile CSS per Quicksand
      },
    },
  },
  plugins: [],
};

Spiegazione:

cormorant: Associa il nome della classe Tailwind (font-cormorant) alla variabile CSS --font-cormorant.
quicksand: Associa il nome della classe Tailwind (font-quicksand) alla variabile CSS --font-quicksand.
Fallback: Se il font principale non è disponibile, viene usato un font di fallback (ad esempio, serif o sans-serif).

4. Uso dei Font nei Componenti

Con questa configurazione, i font possono essere usati sia tramite variabili CSS che tramite classi di Tailwind. Ecco alcuni esempi:

Uso con Variabili CSS:

/* globals.css */
h1 {
  font-family: var(--font-cormorant), serif;
}

p {
  font-family: var(--font-quicksand), sans-serif;
}

Uso con Tailwind CSS:

<h1 class="font-cormorant text-4xl">Titolo con Cormorant</h1>
<p class="font-quicksand text-lg">Paragrafo con Quicksand</p>

Spiegazione:

Variabili CSS: Applicano i font in modo dinamico, ideali per stili globali o contesti complessi. Ad esempio se vogliamo dare un determinato font a tutto il sito/body e un font specifico per i titoli.
Classi di Tailwind: Offrono un approccio rapido e diretto per applicare i font inline o nei componenti React.

Vantaggi di Questa Soluzione

Modularità: Il file fonts.ts centralizza la configurazione dei font, rendendo il codice più pulito e mantenibile.
Ottimizzazione: L'uso di next/font/google garantisce che i font vengano caricati in modo efficiente, migliorando le prestazioni del sito.
Flessibilità: Le variabili CSS e le classi di Tailwind offrono due metodi complementari per applicare i font.
Scalabilità: Aggiungere o rimuovere font è semplice, poiché basta modificare il file fonts.ts e aggiornare tailwind.config.js.

Quando Usare Questa Soluzione

Questa soluzione è ideale quando:

Hai più font da gestire.
Vuoi mantenere il codice modulare e organizzato.
Desideri sfruttare le ottimizzazioni di Next.js per i font.
Vuoi usare sia variabili CSS che classi di Tailwind per applicare i font in modo flessibile.

2. Soluzione con `next/font` per un Solo Font Principale

Panoramica

Questa soluzione prevede l'uso di next/font/google o next/font/local per importare direttamente il font desiderato nel layout dell'applicazione. Il font viene applicato globalmente tramite la proprietà className generata da next/font, eliminando la necessità di configurazioni aggiuntive come variabili CSS o integrazioni con Tailwind CSS.

Passaggi Implementativi

1. Importazione del Font

Il primo passo consiste nell'importare il font desiderato usando next/font/google. Ad esempio, se vuoi usare il font Poppins, puoi farlo direttamente nel file layout.tsx.

Esempio di importazione:

import { Poppins } from 'next/font/google';

// Definizione del font Poppins
const poppins = Poppins({
  subsets: ['latin'], // Specifica il subset di caratteri
  weight: ['400', '700'], // Specifica i pesi del font (normale e grassetto)
});

Spiegazione:

Poppins: È il font importato da next/font/google.
subsets: Specifica il subset di caratteri (ad esempio, latin).
weight: Definisce i pesi del font (ad esempio, 400 per normale e 700 per grassetto).

2. Applicazione del Font nel Layout

Una volta importato il font, puoi applicarlo direttamente al layout dell'applicazione tramite la proprietà className generata da next/font. Questo avviene nel file layout.tsx.

Esempio di layout.tsx:

import '@estetista/styles/globals.css';
import Header from '@estetista/components/molecules/Header';
import Footer from '@estetista/components/molecules/Footer';
import { Poppins } from 'next/font/google';

// Definizione del font Poppins
const poppins = Poppins({
  subsets: ['latin'],
  weight: ['400', '700'],
});

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <>
      <html lang="it">
        <body className={poppins.className}>
          <div className='relative flex flex-col min-h-screen'>
            <Header />
            <main className='flex-grow container mx-auto'>{children}</main>
            <Footer />
          </div>
        </body>
      </html>
    </>
  );
}

Spiegazione:

className={poppins.className}: Applica il font Poppins all'intero contenuto del sito tramite la classe generata da next/font.
Globalità: Il font viene applicato a tutti gli elementi all'interno del <body>, rendendolo disponibile in modo uniforme.

3. Uso del Font nei Componenti

Poiché il font è già applicato globalmente tramite la proprietà className, non è necessario fare ulteriori configurazioni per usarlo nei componenti. Tuttavia, se hai bisogno di applicare stili specifici (ad esempio, pesi diversi del font), puoi farlo direttamente nei tuoi stili CSS o tramite classi inline.

Esempio di uso nei componenti:

<h1 className="font-bold text-4xl">Titolo in Grassetto</h1>
<p className="text-lg">Paragrafo con testo normale</p>

Spiegazione:

font-bold: Applica il peso grassetto (700) del font Poppins.
text-4xl e text-lg: Definiscono la dimensione del testo.

Vantaggi di Questa Soluzione

Semplicità: L'approccio è diretto e non richiede configurazioni aggiuntive come variabili CSS o file dedicati.
Ottimizzazione: L'uso di next/font garantisce che il font venga caricato in modo efficiente, migliorando le prestazioni del sito.
Uniformità: Il font viene applicato globalmente, garantendo coerenza visiva in tutto il sito.
Scalabilità Limitata: Ideale per progetti con un solo font principale, riducendo la complessità della gestione dei font.

Quando Usare Questa Soluzione

Questa soluzione è ideale quando:

Hai un solo font principale da gestire.
Vuoi mantenere il codice semplice e minimale.
Non hai bisogno di usare più font o configurazioni avanzate.
Desideri sfruttare le ottimizzazioni di Next.js per i font senza ulteriori configurazioni.

Gestione Font - lucadileo9/template-catalog GitHub Wiki

Introduzione

1. Soluzione con File fonts.ts e Integrazione con Tailwind CSS

Panoramica

Passaggi Implementativi

1. Creazione del File fonts.ts

2. Applicazione dei Font nel Layout

3. Configurazione dei Font in tailwind.config.js

4. Uso dei Font nei Componenti

Vantaggi di Questa Soluzione

Quando Usare Questa Soluzione

2. Soluzione con next/font per un Solo Font Principale

Panoramica

Passaggi Implementativi

1. Importazione del Font

2. Applicazione del Font nel Layout

3. Uso del Font nei Componenti

Vantaggi di Questa Soluzione

Quando Usare Questa Soluzione

⚠️ **GitHub.com Fallback** ⚠️

1. Soluzione con File `fonts.ts` e Integrazione con Tailwind CSS

1. Creazione del File `fonts.ts`

3. Configurazione dei Font in `tailwind.config.js`

2. Soluzione con `next/font` per un Solo Font Principale

⚠️ GitHub.com Fallback ⚠️