Come provare i font su un sito web e mostrare al cliente il prima e dopo

Per mostrare un nuovo font a un cliente, apri il suo sito in Chrome, prova il font sulla pagina vera con l’estensione gratuita FontMee e premi il suo pulsante prima/dopo. FontMee fa due schermate, una con il vecchio font e una con il nuovo, e le unisce in un’unica immagine che puoi incollare in una e-mail o salvare come PNG. Sul sito vero del cliente non cambia nulla, solo sul tuo schermo.

Perché un’immagine sul sito vero batte un mockup

Un mockup è un’immagine inventata di come potrebbe essere una pagina, di solito disegnata in un programma di grafica. Richiede tempo, e un font spesso sembra diverso quando intorno ci sono le parole, il logo e le foto vere del cliente. Se provi il font sulla pagina vera, il cliente vede il proprio sito con il font nuovo, ed è quello il momento in cui può dire sì o no.

Risparmi anche un giro di lavoro. Puoi provare tre font in dieci minuti, mandare tre immagini e realizzare solo quello che sceglie il cliente.

Che cosa ti serve

• Google Chrome su un computer, perché le estensioni funzionano lì.
• L’indirizzo del sito che vuoi mostrare: il tuo, quello di un cliente o persino quello di un concorrente.
• L’estensione gratuita FontMee, un piccolo componente che dà a Chrome una funzione in più. Senza account, senza pagare.

Il prima e dopo in sei passi

FontMee mostra un font su qualsiasi pagina senza cambiarla per nessun altro. Ecco tutto il lavoro, e il breve video mostra il pannello in azione.

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 il sito del cliente 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. Scegli il font nuovo. Sotto Applica le modifiche a scegli Tutto, Titoli o Testo e clicca un font. Vuoi un font per i titoli e uno per il testo che stiano bene insieme? Apri Abbinamenti di font e premi Usa questa coppia. La nostra guida ai migliori abbinamenti di font Google ne mostra alcuni.
4. Inquadra l’immagine. L’immagine mostra ciò che è sul tuo schermo adesso, quindi scorri fino alla parte che vuoi mostrare, per esempio la parte alta della home page, e usa Regola per dimensione, spessore e interlinea finché non va bene.
5. Premi Prima / dopo. È il pulsante con l’icona della fotocamera, accanto all’interruttore Font originale e Anteprima FontMee. FontMee porta la scheda in primo piano e fa due schermate, prima con il font nuovo e poi con l’originale. Chrome ne permette solo due al secondo, quindi aspetta un attimo e non cambiare scheda.
6. Mandala. Si apre una piccola finestra con l’immagine. Con Cursore trascini un divisore sulla pagina, con Affiancati vedi entrambe insieme. Premi Copia immagine e incollala con Ctrl+V in una e-mail o in una chat, oppure Salva immagine per avere un file PNG. L’immagine unita porta le etichette Prima e Dopo.

Mostrala dal vivo in riunione, o mandala dopo

Se il cliente è in videochiamata, condividi la tua scheda di Chrome e passa da Font originale ad Anteprima FontMee in alto nel pannello. Puoi anche premere Alt + Shift + O per cambiare, anche con il pannello chiuso. FontMee ha anche il pulsante Mantieni sul sito, così i tuoi font ci sono ancora quando riapri la pagina. Se il cliente non c’è, parla l’immagine per te.

Rendi facile al cliente dire di sì

• Mostra due o tre opzioni, non dieci. Un’immagine per font basta.
• Scrivi i nomi dei font nella e-mail, così il cliente può rispondere «il secondo».
• Tieni la stessa parte della pagina in ogni immagine, così l’unica differenza è il font.
• Quando sceglie, torna in FontMee e premi Copia CSS. Ottieni il codice che lo rende reale, e la nostra guida per aggiungere Google Fonts mostra dove metterlo.

Quattro cose da controllare prima di mandarla

• È solo un’anteprima. Nessun altro vede il font nuovo finché il codice non viene aggiunto al sito vero. Dillo al cliente, così non lo cerca online.
• Controlla le parole vere. Guarda titoli, pulsanti e paragrafi lunghi. Un font bellissimo in un titolo può stancare in un paragrafo.
• Controlla le lettere speciali. Se il sito usa lettere come è, à, ù o ò, scorri fino ad alcune e verifica che si vedano bene. FontMee può filtrare i font per alfabeto, come Latin Extended o cirillico.
• Controlla la licenza. Google Fonts è open source e i font Fontshare sono liberi da usare, ma un font che il cliente ha già può avere regole sue. FontMee mostra un promemoria sulla licenza quando copi il codice.

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