Dove potete trovare i web font, quali font sono compatibili con l’HTML, e quali sono “web safe” e possono essere utilizzati su qualsiasi sito web? Li esploreremo tutti in questo articolo.<\/p>\n
Cominciamo!<\/p>\n
Font HTML: Cosa Sono i Web Font?<\/h2>\n
I caratteri tipografici hanno una ricca storia, ma i font, come li conosciamo oggi, sono entrati in uso con l’avvento dei computer e di internet. I font digitali avevano bisogno di un trattamento speciale per essere resi sugli schermi. E quando sono entrate in gioco diverse dimensioni di schermo e dispositivi, le cose si sono complicate.<\/p>\n Quando si tratta di font digitali, ce ne sono di tipi diversi. Alcuni sono destinati principalmente alla stampa e al graphic design. Questi tendono a essere grandi e inadatti ai siti web, ma sono perfetti per creare delle grafiche. Ci sono anche font “web safe” che si trovano sulla maggior parte delle macchine.<\/p>\n Ma per il web design, quelli che dovete cercare sono i web font, caratteri tipografici appositamente progettati per essere visualizzati perfettamente sul web e su una variet\u00e0 di dispositivi. Potete anche usare i web font nelle email<\/a> o in altri servizi online.<\/p>\n Ci sono alcune cose che rendono i web font diversi dai normali font scaricabili per il desktop. Per esempio, spesso non possono essere usati con programmi sul vostro computer; devono essere caricati su un server e usati sul web.<\/p>\n Sono anche progettati per essere leggibili su diversi schermi e per diverse dimensioni. Possono essere stilizzati con i CSS<\/a> (per l’applicazione di grassetto o corsivo, colori e altri attributi) e offrire supporto per altre condizioni come il rendering da destra a sinistra.<\/p>\n Anche se i web font non vengono installati sui vostri dispositivi o su quelli dei vostri visitatori, ci sono comunque dei modi speciali per visualizzarli affinch\u00e9 chiunque visiti il vostro sito possa vederli.<\/p>\n Potete scaricare questi font come al solito e caricarli sul vostro server, oppure usare uno speciale servizio di web font hosting che li incorpora sul vostro sito senza richiedere un download.<\/p>\n\n Alcuni font non sono fatti per essere usati sul web, quindi quali possono essere inseriti nel vostro sito HTML?<\/p>\n Essenzialmente, sul vostro sito potete usare qualsiasi font scaricabile. Tutto quello che dovete fare \u00e8 caricarlo e configurarlo correttamente, e questo dovrebbe bastare per visualizzarlo sul vostro sito web.<\/p>\n Anche se tecnicamente potete usare qualsiasi font sul vostro sito, farlo non \u00e8 sempre l’idea migliore. Dovreste cercare font specifici per il web, non font destinati a essere usati nella stampa o nel graphic design. Alcuni font sono cos\u00ec stilizzati o destinati a dimensioni di testo cos\u00ec grandi che non si visualizzano correttamente su un sito. Con un font web, questo non \u00e8 un problema.<\/p>\n Ci sono anche questioni di licenza di cui preoccuparsi quando si usano font desktop sul proprio sito (o si usano font web per il design di stampa). Usare un font con un mezzo diverso da quello per cui \u00e8 stato acquistato pu\u00f2 mettervi nei guai. Assicuratevi di leggere attentamente la licenza del vostro font prima di acquistarlo.<\/p>\n Potete anche cercare alcuni host che, attraverso piani gratuiti o a pagamento, vi permettono di usare una semplice chiamata HTML per rendere i loro font sul vostro sito web.<\/p>\n A ogni modo, il font che usate deve essere caricato correttamente<\/a> ed essere del tipo di file corretto:<\/p>\n Con questi tipi di file, sarete poi in grado di usare i font in tutto il vostro sito e di stilizzarli con HTML e CSS.<\/p>\n Ci sono anche font sicuri per il web che di solito funzionano universalmente in tutti i browser e programmi.<\/p>\n Un problema con la maggior parte dei web font \u00e8 che non c’\u00e8 garanzia che si visualizzino correttamente sul vostro sito web. A differenza del graphic design, dove potete semplicemente creare un’immagine in un programma e stamparla per la distribuzione, un browser<\/a> deve rendere i web font ogni volta che qualcuno apre la pagina. Se i vostri font non riescono a caricarsi, potreste ritrovarvi con un sito web vuoto e rotto.<\/p>\n Per questo motivo, alcuni proprietari di siti web scelgono di affidarsi solo a font sicuri per il web (o font \u201cweb safe\u201d)<\/a>. I font web safe sono preinstallati sulla maggior parte dei sistemi, e questo garantisce che possano essere visualizzati correttamente su tutti i dispositivi tranne che in quelli pi\u00f9 sconosciuti. Tendono anche a caricarsi molto pi\u00f9 velocemente dei font web, che possono invece essere abbastanza lenti.<\/p>\n Se tutto ci\u00f2 che vi preoccupa \u00e8 massimizzare le prestazioni e assicurare che il vostro sito visualizzi correttamente i font, allora i font web safe fanno per voi.<\/p>\n Ecco una lista di font sicuri per il web che generalmente non creano problemi:<\/p>\n Ci sono anche decine di altri font sicuri per il web<\/a>, ma questi che abbiamo elencato sono i pi\u00f9 onnipresenti sui dispositivi.<\/p>\n Tra tutti questi, Arial, Times New Roman, Helvetica e Courier New sono i pi\u00f9 sicuri. Nonostante siano considerati sicuri per il web, alcuni degli altri non funzionano su certi sistemi operativi.<\/p>\n Il problema \u00e8 che a meno che non stiate gestendo qualcosa come un sito governativo o un semplice sito informativo, non vale la pena sacrificare il vostro branding evitando la maggior parte dei font. I font sicuri per il web sono leggibili, ma sono anche troppo generici e abusati.<\/p>\n \u00c8 molto meglio scegliere un set di font pi\u00f9 bello e unico da usare sul vostro sito web, soprattutto perch\u00e9 c’\u00e8 una soluzione al problema dei font web che non riescono a caricarsi: i font fallback (o font di riserva).<\/p>\n I font stack, noti anche come font di riserva, sono l’unica ragione per utilizzare font web audaci e creativi.<\/p>\n Non importa cosa fate o quali precauzioni prendete, ci sar\u00e0 sempre qualcuno che non sar\u00e0 in grado di caricare i vostri font. Forse hanno Javascript disabilitato, quindi i vostri font ospitati non vengono visualizzati correttamente, o qualcosa va storto nel codice<\/a> e impedisce la visualizzazione dei font che avete caricato. O forse un certo font pu\u00f2 non essere compatibile con il dispositivo di alcune persone.<\/p>\n Grazie ai font di fallback<\/a>, \u00e8 facile caricare un font sicuro per il web se qualcosa va storto. I font fallback funzionano selezionando un font che l’utente ha installato in base alla famiglia di font<\/a>:<\/p>\n Ricordate che i stack di font sono un raggruppamento di font; \u00e8 del tutto possibile avere pi\u00f9 font di riserva in sequenza. Assicuratevi solo di avere sempre un font sicuro per il web nel vostro stack, cos\u00ec da avere sempre la possibilit\u00e0 di comunicare il vostro marchio con un font simile se quello principale fallisce.<\/p>\n Se volete aggiungere un web font al vostro sito, avete alcune opzioni.<\/p>\n Per gli utenti di WordPress, il modo pi\u00f9 semplice per ottenere i font sul vostro sito \u00e8 tramite un plugin. I due pi\u00f9 popolari sono Easy Google Fonts<\/a> e Use Any Font<\/a>. Il primo semplifica il processo di aggiunta di Google Fonts al vostro sito web, mentre UAF vi permette di caricare direttamente i font sul vostro sito.<\/p>\n Se non state usando WordPress, o non volete fare affidamento su un plugin, il processo richieder\u00e0 qualche ritocco manuale.<\/p>\n In primo luogo, \u00e8 possibile utilizzare i font ospitati altrove, come con Google Fonts<\/a>. Le istruzioni qui dipendono da quale servizio scegliete. Con Google Fonts, dovreste incorporare il font che volete usare nel vostro Potete anche ospitare localmente i font<\/a> che avete scaricato da internet sul vostro sito web. Questo pu\u00f2 essere preferibile perch\u00e9 non avrete bisogno di affidarvi a servizi di terze parti.<\/p>\n Fortunatamente, questo \u00e8 molto facile da fare se avete un web font correttamente configurato. Basta caricare i file sul vostro server, potete usare la regola @font-face<\/a> nel vostro foglio di stile per definirlo. Per esempio:<\/p>\n Poi potete usare il tag Una volta che il vostro font \u00e8 caricato in modo sicuro sul vostro sito web, potete stilizzarlo con HTML e CSS<\/a>. Anche se avete poche conoscenze di programmazione, stilizzare un font \u00e8 abbastanza facile. Potete cambiare il colore del testo, il colore dello sfondo, la dimensione, lo stile o il peso.<\/p>\n Nota: <\/strong>se avete lavorato con le vecchie versioni di HTML, potreste ricordare il tag Per prima cosa, potete cambiare il carattere con i codici di colore. Potete usare un nome di colore <\/a>come “rosso”, un codice RGB o un valore HEX. Questo viene impostato con la propriet\u00e0 O in un singolo elemento di stile HTML:<\/p>\n Per il colore di sfondo vale lo stesso, ma usando l’attributo background-color.<\/p>\n Poi \u00e8 il turno della dimensione del font<\/a>. Questa pu\u00f2 essere espressa in pixel, percentuali o ems<\/a> (che vanno bene per la progettazione di siti responsive).<\/p>\n Oppure:<\/p>\n E per ultimi ci sono lo stile<\/a> e il peso del carattere, o il corsivo e il grassetto. Per il testo inclinato, usate il tag “italic”.<\/p>\n Potete anche usare i tag HTML al loro posto. Per il corsivo, potete usare:<\/p>\n per un testo che deve trasmettere enfasi, oppure<\/p>\n per un testo che deve distinguersi visivamente.<\/p>\n E per il grassetto, usate:<\/p>\n Per esempio:<\/p>\n o<\/p>\n Se volete usare un host di font di terze parti o scaricarli, dovete sapere quali sono i posti migliori per trovare i font. Ci sono centinaia di distributori sul web, ma solo una buona manciata sono noti per essere fonti affidabili per i font. Eccone alcuni:<\/p>\n Ci sono migliaia di font web l\u00e0 fuori, ma da dove cominciare? Qui vi mostriamo dieci semplici font HTML che starebbero benissimo su qualsiasi sito web. Si tratta di font sicuri per il web, quindi dovrebbero funzionare su quasi tutti i dispositivi. Sono anche ottimi font di riserva.<\/p>\n Se avete bisogno di qualcosa di pi\u00f9 eccitante, abbiamo un sacco di articoli sui font corsivi<\/a>, calligrafici<\/a> e moderni<\/a>.<\/p>\n Arial \u00e8 il pi\u00f9 noto di tutti i font. Non \u00e8 il pi\u00f9 bello, ma \u00e8 semplice e utile in una variet\u00e0 di situazioni.<\/p>\n Anche Times New Roman \u00e8 un font estremamente comune. \u00c8 pi\u00f9 adatto se gestite un sito pi\u00f9 formale. Questo font serif non \u00e8 particolarmente accattivante, ma non \u00e8 nemmeno particolarmente distraente.<\/p>\n Palatino potrebbe suonarvi familiare, dato che \u00e8 spesso usato nella stampa di libri. Ora \u00e8 un elegante font digitale incluso di default su molti dispositivi.<\/p>\n Verdana \u00e8 noto per essere molto facile da leggere, ed \u00e8 bellissimo anche a grande dimensione. Questo sans serif \u00e8 una buona alternativa all\u2019Arial.<\/p>\n Ricorda il testo della vecchia macchina da scrivere: Courier New \u00e8 un grande design monospace per i siti che propendono per un look vecchio stile ma leggibile.<\/p>\n Calibri \u00e8 un font sans serif semplice e grazioso che viene fornito di serie con programmi come Microsoft Office. Tuttavia, \u00e8 un font proprietario, quindi \u00e8 spesso supportato solo su sistemi operativi Windows.<\/p>\n Questo font serif arrotondato \u00e8 ispirato al font Garamond, che \u00e8 un font web safe simile. Se avete bisogno di un font formale non cos\u00ec serio come il Times New Roman, \u00e8 una buona scelta.<\/p>\n Molto simile a Palatino, Garamond \u00e8 un font classico usato spesso per la stampa di libri. Nonostante sia stato aggiornato per i sistemi operativi moderni, sembra ancora abbastanza vecchio stile.<\/p>\n La spaziatura minima delle lettere su questo font serif gli d\u00e0 un aspetto unico. \u00c8 possibile trovarlo sulla maggior parte dei dispositivi Apple.<\/p>\n Questo font pulito era un carattere predefinito nei vecchi sistemi operativi Windows. Il suo aspetto pi\u00f9 audace lo fa risaltare quanto basta senza distrarre.<\/p>\n\n Scegliere dei web font che vengano visualizzati bene<\/a> sul vostro sito web, siano leggibili e diano personalit\u00e0 al vostro brand<\/a> \u00e8 importante.<\/p>\n Ci sono vari siti web dove \u00e8 possibile installare font gratuiti o scaricare quelli con licenza a pagamento, e in questo articolo abbiamo offerto alcuni esempi di buoni font per iniziare.<\/p>\n Non siete obbligati ad attenervi solo ai noiosi font sicuri per il web che avete visto in giro su internet per decenni. Grazie ai font di fallback, potete usare qualsiasi font che vi piace e impostare un font di riserva da usare se quello principale non si carica.<\/p>\n Se state usando questi font HTML sul vostro sito web, nelle email, o nel vostro logo, assicuratevi di fare molti test, cos\u00ec il vostro sito rimane leggibile, e la tipografia si integrer\u00e0 bene con il resto del vostro design.<\/p>\n","protected":false},"excerpt":{"rendered":" Tra le cose pi\u00f9 importanti per il branding e l’aspetto del vostro sito web, ci sono i font. Un font scelto con cura pu\u00f2 trasmettere personalit\u00e0, …<\/p>\n","protected":false},"author":20,"featured_media":43870,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[7789,84],"topic":[25878,25943],"class_list":["post-43868","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-fonts","tag-webdesign","topic-design-sito-wordpress","topic-font-wordpress"],"yoast_head":"\n![\"Google](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/Google-Fonts-Most-Popular-Web-Fonts.png\")
Quali Font Si Possono Usare in HTML?<\/h3>\n
![\"Il](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/scribble-font.png\")
\n
Cosa Sono i Font Sicuri per il Web?<\/h3>\n
![\"Arial](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/arial-font.jpg\")
\n
Una Nota sui Font Stack<\/h3>\n
\n
Come Aggiungere Font con l’HTML<\/h2>\n
<head><\/code> e poi richiamarlo quando volete usarlo.<\/p>\n\n@font-face {\n\nfont-family: FontName;\n\nsrc: url(FontLocationOnServer);\n\n}<\/code><\/pre>\nfont-family<\/code> per richiamare il vostro font ovunque vogliate nel documento HTML.<\/p>\nStilizzare i Font con HTML e CSS<\/h3>\n
<font><\/code>. Questo non \u00e8 pi\u00f9 supportato e non dovrebbe essere usato. Potete invece dare uno stile al testo con i CSS o con un elemento di stile HTML.<\/p>\ncolor<\/code> in questo modo:<\/p>\n\np {\n\ncolor: blue;\n\n}\n\n<\/code><\/pre>\n\n<p style=\"color:blue;\">Text.<\/p>\n<\/code><\/pre>\n\np {\n\nbackground-color: blue;\n\n}<\/code><\/pre>\n p {\n\nfont-size: 16px;\n\n}<\/code><\/pre>\n<p style=\"font-size:200%;\">Text.<\/p><\/code><\/pre>\n![\"Impostare](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/font-size-css.png\")
.italic {\n\nfont-style: italic;\n\n}\n\nMentre per il grassetto:\n\n.bold {\n\nfont-weight: bold;\n\n}<\/code><\/pre>\n![\"Impostare](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/font-style-css.png\")
<em><\/code><\/pre>\n <i> <\/code><\/pre>\n<b><\/code> o <strong><\/code><\/pre>\n<b>Bold Text<\/b><\/code><\/p>\n<strong>Sono importante.<\/strong><\/code><\/pre>\nDove Trovare i Font HTML?<\/h2>\n
\n
![\"Google](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/google-fonts.jpg\")
\n
I 10 Migliori Font HTML<\/h2>\n
1. Arial<\/h3>\n
![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/arial-font.png\")
2. Times New Roman<\/h3>\n
3. Palatino<\/h3>\n
![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/palatino-font.png\")
4. Verdana<\/h3>\n
5. Courier New<\/h3>\n
![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/courier-new-font.png\")
6. Calibri<\/h3>\n
![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/calibri-font.png\")
7. Georgia<\/h3>\n
![\"georgia\"](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/georgia-font.jpg\")
8. Garamond<\/h3>\n
![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/garamond-font.png\")
9. Didot<\/h3>\n
![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/didot-font.jpg\")
10. Tahoma<\/h3>\n
![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/tahoma-font.png\")
Riepilogo<\/h2>\n