Home
» RAGNATELA
»
WebFonter: Anteprima dei font di FontShop su qualsiasi sito web: cosa funziona ora
WebFonter: Anteprima dei font di FontShop su qualsiasi sito web: cosa funziona ora
WebFonter era uno strumento per browser che permetteva di provare i caratteri di FontShop direttamente su un sito web prima di acquistarli. Consenteva ai designer di modificare titoli e testo direttamente sul sito, anziché valutare un carattere da un'immagine statica. Questo flusso di lavoro originale è ormai un ricordo del passato: il negozio online di FontShop ha chiuso nel 2023 e il vecchio indirizzo di WebFonter reindirizza a una pagina informativa di FontShop anziché a uno strumento di installazione. È comunque possibile visualizzare in anteprima i caratteri tramite MyFonts e sperimentare con la tipografia del proprio sito utilizzando gli strumenti per sviluppatori del browser.
È ancora possibile installare WebFonter?
Non fate affidamento sulle vecchie istruzioni di installazione di WebFonter. Secondo le FAQ ufficiali di Monotype sulla chiusura della piattaforma , la piattaforma commerciale FontShop.com è stata dismessa il 15 dicembre 2023. L' indirizzo web originale di WebFonter ora porta alla pagina informativa di FontShop, che indirizza i clienti a MyFonts. Non è stato possibile verificare l'esistenza di un'estensione o di un bookmarklet di WebFonter attualmente supportati. Le vecchie istruzioni per l'estensione e il bookmarklet di Chrome devono pertanto essere considerate come una documentazione del funzionamento del prodotto, non come una guida di installazione valida.
Cosa faceva originariamente WebFonte
Il principale vantaggio dello strumento era la possibilità di visualizzare un carattere tipografico nel suo contesto. Invece di aprire un campione di font separato, un designer poteva visualizzare una pagina reale e modificarne la tipografia mantenendo visibile il layout.
Apri un sito web. Lo strumento originale era offerto come estensione per Chrome e come bookmarklet per altri browser. Veniva descritto come utilizzabile su siti web attivi e ospitati localmente, a condizione che il servizio di font fosse raggiungibile.
Scegli una famiglia di caratteri. Il controllo Cambia famiglia offriva la possibilità di sfogliare e cercare i caratteri all'interno del catalogo FontShop. La scelta di una famiglia aggiornava l'anteprima della pagina.
Assegna e regola gli stili. L'interfaccia originale prevedeva l'inserimento di titoli e testo del corpo, ma consentiva l'aggiunta di altri elementi e offriva un controllo "Tweak" per regolare dimensioni, interlinea e spaziatura.
Uno strumento di selezione dei font a livello di sito web illustra il tipo di confronto contestuale per cui WebFonter è stato progettato.
Queste sono descrizioni di funzionalità storiche, non menu attuali confermati. Alcune vecchie recensioni menzionavano anche una scorciatoia da tastiera Ctrl+H per nascondere i controlli di WebFonter. Evitate di seguire questo consiglio in un browser moderno: Ctrl+H normalmente apre la cronologia di navigazione se la pagina o lo strumento non la intercetta.
Come testare i caratteri FontShop su un sito web oggi
La collezione FontFont di FontShop è ora disponibile tramite la pagina informativa ufficiale di FontShop e MyFonts . Questo approccio separa la scoperta dei font dal test sulla pagina; a differenza del vecchio WebFonter, non si tratta di un'anteprima immediata da FontShop al sito web.
1. Visualizza in anteprima il carattere usando parole tue
Trova una famiglia di font adatta su MyFonts. Nell'anteprima della famiglia di font o del singolo stile, inserisci un titolo, un'etichetta di navigazione o un paragrafo tratto dal tuo progetto. Secondo le FAQ di MyFonts , puoi regolare le dimensioni e i colori dell'anteprima e verificare le funzionalità OpenType supportate. La funzione Album ti aiuta inoltre a raccogliere i font per confrontarli. Prova diverse varianti di spessore: un font accattivante per i titoli potrebbe non essere comodo per i paragrafi lunghi.
Prima di utilizzare un carattere tipografico per il layout di una pagina, confronta i diversi stili e dimensioni.
2. Esamina il testo che desideri modificare
Apri il tuo sito web in Chrome, fai clic con il pulsante destro del mouse su un titolo o un paragrafo e scegli "Ispeziona" . Il pannello Elementi identifica il nodo HTML selezionato; il pannello Stili elenca il CSS che lo influenza. Puoi anche utilizzare lo strumento di selezione degli elementi per selezionare il testo sulla pagina. Consulta la guida di Google sulla modalità Ispeziona per i controlli documentati.
Esamina un'intestazione e individua le dichiarazioni relative a font-family, font-size e line-height nel riquadro Stili.
3. Sperimenta temporaneamente con la tipografia
In Elementi → Stili , modifica una dichiarazione font-family esistente o aggiungine una all'elemento selezionato. Ad esempio, prova Georgia, serif come sostituto locale per serif direction, quindi sperimenta con font-size , line-height o letter-spacing . Le modifiche sono generalmente visibili immediatamente, ma non costituiscono una modifica permanente al tuo sito pubblicato. Google spiega questi controlli nella documentazione CSS di DevTools .
Importante: digitare il nome di un font commerciale nel CSS non comporta il download o il caricamento automatico del font stesso. Per visualizzare il font commerciale effettivo sulla pagina, è necessario che sia già disponibile tramite una risorsa di font regolarmente autorizzata e caricata, oppure tramite un'installazione locale consentita. In caso contrario, il browser visualizzerà un'anteprima di fallback. Non confondere l'anteprima di fallback con il font che si intende acquistare.
Confronta lo stesso titolo e lo stesso paragrafo in due diverse impaginazioni, verificando l'andata a capo del testo e la gerarchia.
4. Verificare la licenza prima della distribuzione
L'anteprima gratuita sul sito non costituisce una licenza per ospitare i file dei font su un sito web pubblico. MyFonts spiega che i webfont vengono incorporati tramite @font-face e richiedono un'apposita licenza per webfont; i domini consentiti e i termini di visualizzazione della pagina dipendono dalla licenza offerta per quel prodotto. Prima di aggiungere i file in produzione, si prega di consultare le informazioni sulla licenza della famiglia di font e i termini di acquisto. Una licenza per desktop non deve essere considerata sufficiente per l'incorporamento sul web.
Cosa verificare prima di scegliere il font definitivo
Adattamento del titolo: il titolo si adatta naturalmente alla larghezza del testo sia su desktop che su dispositivi mobili?
Leggibilità del testo: le dimensioni ridotte, l'interlinea e la densità dei paragrafi risultano confortevoli?
Spessori e caratteri: sono disponibili i glifi per il grassetto, il corsivo, la punteggiatura e la lingua di cui hai bisogno?
Caricamento effettivo: viene visualizzato il volto reale o solo un'immagine di fallback del browser?
Licenza: Il piano acquistato copre l'utilizzo del tuo sito web?
Se una modifica sembra non avere alcun effetto, verifica se una regola CSS più specifica sovrascrive la tua modifica, se il font è effettivamente caricato e se hai selezionato l'elemento corretto della pagina. Prova con diverse larghezze della viewport. Il vantaggio iniziale di WebFonter era il contesto immediato; oggi, combinare un esempio di MyFonts con modifiche temporanee degli Strumenti per sviluppatori offre un modo pratico per fare una scelta tipografica consapevole senza affermare che lo strumento, ormai obsoleto, sia ancora disponibile.