Come usare un font personalizzato sul tuo sito (provalo prima)

Per usare un font personalizzato sul tuo sito, carichi il file del font sul tuo sito, dici al CSS dove si trova con una regola @font-face e poi lo usi con font-family. Prima di tutto questo puoi provare il font sulle tue pagine vere: con l’estensione gratuita FontMee carichi un file .woff2, .ttf o .otf dal tuo computer e lo vedi su qualsiasi sito con un clic, senza cambiare nulla e senza caricare nulla.

Che cos’è un font personalizzato

Un font personalizzato è semplicemente un file di font che non è né uno dei font che ogni computer ha già né uno dei font gratuiti di Google Fonts. Può essere un font del marchio fatto da un designer, uno che hai comprato o uno che hai creato tu. Di solito è un file che finisce con .woff2, .woff, .ttf o .otf. Non hai ancora il file? La nostra guida per aggiungere Google Fonts copre quelli gratuiti.

Per i siti web, .woff2 è la scelta migliore: è piccolo, quindi le pagine si caricano più in fretta, e tutti i browser attuali sanno leggerlo. .ttf e .otf sono i formati che si usano sul computer. Funzionano anche nei browser, ma i file sono più grandi. Se hai solo un .ttf o un .otf, per provare va benissimo.

Passo 1: Provalo prima su un sito vero

Caricare un font e scrivere codice solo per scoprire che non ti piace fa perdere un pomeriggio. FontMee è un’estensione gratuita di Chrome, un piccolo componente che dà a Chrome una funzione in più, e ti lascia provare i font prima su una pagina dal vivo. Accetta anche i tuoi file. Il breve video mostra il pannello.

1. Installa FontMee. Aggiungila dal Chrome Web Store. È gratuita e non chiede un account. Clicca sull’icona del puzzle di Chrome e bloccala in alto, così è sempre a un clic.
2. Apri una pagina del tuo sito e clicca sull’icona di FontMee. Il pannello si apre accanto alla pagina. Puoi anche premere Alt + Shift + F. Le pagine di Chrome stesso (Nuova scheda, il Web Store, le pagine chrome://) non si possono modificare.
3. Premi Carica e scegli il file del font. Puoi sceglierne più d’uno insieme, fino a 6 MB ciascuno. FontMee dà al font il nome del file, quindi my_brand_sans.woff2 diventa my brand sans.
4. Trovalo in I miei font. I tuoi caricamenti hanno un filtro proprio e sono segnati come Tuo. Passa il mouse su uno per rinominarlo con la matita o eliminarlo con il cestino.
5. Clicca il font per provarlo. Sotto Applica le modifiche a scegli Tutto, Titoli o Testo. Usa Regola per dimensione, spessore e interlinea, e passa da Font originale ad Anteprima FontMee per confrontare.
6. Scrivi le tue parole. Nella casella del testo di prova scrivi un titolo vero, un nome o una frase con le tue lettere speciali, per vedere come le gestisce il font.

I file del tuo font restano nel tuo browser, sul tuo computer. Non viene caricato nulla, e la prova cambia solo ciò che vedi tu, quindi nessun altro se ne accorge. Vuoi mostrare il risultato a un cliente? FontMee può fare un’immagine prima e dopo: ecco come.

Passo 2: Metti il file del font sul tuo sito

Quando sei soddisfatto, il font deve vivere sul tuo sito, perché i browser dei visitatori possono caricare solo file che sono su internet, non sul tuo computer. Crea una cartella chiamata fonts e caricaci il file, come fai con le immagini: dal gestore file del tuo hosting, via FTP o con il caricamento dei font che magari offre il tuo costruttore di siti. La cartella potrebbe essere così:

your-website/
  index.html
  style.css
  fonts/
    my-brand-sans.woff2
    my-brand-sans.ttf

Usa nomi di file semplici, in minuscolo e senza spazi (my-brand-sans.woff2, non My Brand Sans (1).woff2). Così eviti una causa classica di «il mio font non compare».

Passo 3: Parla del font al tuo CSS

Adesso scrivi due piccole cose nel tuo CSS, le regole che dicono alla pagina come apparire. Prima un blocco @font-face, che dice «esiste un font con questo nome e il suo file è qui». Poi una regola normale che usa il font.

@font-face {
  font-family: 'My Brand Sans';
  src: url('/fonts/my-brand-sans.woff2') format('woff2'),
       url('/fonts/my-brand-sans.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: 'My Brand Sans', sans-serif;
}

h1, h2 {
  font-family: 'My Brand Sans', serif;
}

In parole semplici: font-family nel primo blocco è un nome che ti inventi. src è dove si trova il file, e la seconda riga è una riserva in .ttf per i browser più vecchi. font-display: swap mostra il tuo testo in un font di riserva finché arriva quello vero, così i visitatori non guardano mai uno spazio vuoto. Nelle regole in fondo, la parola dopo la virgola (sans-serif) è quel font di riserva, ed è buona pratica aggiungerne sempre uno.

Metti questo CSS dove il tuo sito tiene gli stili: nel style.css, in WordPress sotto Aspetto, Personalizza, CSS aggiuntivo, oppure nella casella di CSS personalizzato del tuo costruttore di siti. Se il file è in un’altra cartella, cambia il percorso dentro url().

La scorciatoia: lascia che FontMee lo scriva

Tornato in FontMee, premi Copia CSS. Per un font che hai caricato, FontMee scrive le tue regole e aggiunge un commento con una riga @font-face da cui partire. Cambia nome ed estensione del file se i tuoi sono diversi, per esempio in .ttf. Preferisci tutto pronto? Premi Scarica lo ZIP per l’hosting in proprio. Ottieni una cartella con il tuo file di font dentro fonts, un fonts.css con il blocco @font-face, un fontmee.css con le tue regole e un breve README. Carica la cartella, collega i due fogli di stile e hai finito.

Quattro cose da controllare prima di pubblicare

• Controlla la licenza. Un file di font sul tuo computer non è automaticamente libero di andare su un sito. Molte licenze coprono solo l’uso desktop e hanno una licenza web separata. FontMee te lo ricorda con «il tuo file: controlla la licenza prima di pubblicare». Nel dubbio, chiedi dove hai preso il font.
• Controlla le tue lettere. Nella casella di prova scrivi parole con i tuoi caratteri speciali (è, à, ù, ò, ì). Un font può sembrare perfetto e mancare comunque di alcune lettere, che allora compaiono in un font di riserva.
• Tieni un font di riserva. Chiudi ogni font-family con serif o sans-serif, così il testo resta bello mentre il font si carica.
• Tienilo leggero. Uno o due file di font bastano. Ogni file in più appesantisce un po’ la pagina, quindi scegli .woff2 quando puoi.

Non hai ancora un sito? Allora il font viene dopo. Un sito ha anche bisogno di una casa in cui vivere, e un costruttore di siti è il modo più rapido per averla senza codice.

Scarica l’estensione

FontMee è gratuita, con oltre 1.900 font, Copia CSS in quattro formati, uno ZIP per l’hosting in proprio e il caricamento dei tuoi font. Senza account, senza abbonamento. Aggiungila dal Chrome Web Store o leggi prima la pagina di FontMee.

Da sapere prima di iniziare

Domande frequenti