# Font HTML: come usare caratteri sicuri per il web Con i font HTML puoi dare un tocco personalizzato ai contenuti di testo delle tue pagine web. Per assicurare che la tua pagina sia a misura di utente devi necessariamente utilizzare caratteri sicuri per il web. ## Quali font HTML sono disponibili? In teoria esiste un numero enorme di caratteri HTML. Di per sé l’[HTML](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/cose-lhtml/) non mette a disposizione un carattere, pertanto per le tue pagine web puoi teoricamente usare qualsiasi font caricandolo e configurandolo correttamente. Possono però emergere diversi problemi. In particolare, spesso i caratteri fitti o ornati **non vengono visualizzati come desiderato**. In questi casi ne risente non solo il design, ma anche la leggibilità. Anche quando un carattere HTML non è **installato** sul computer dell’utente possono insorgere problemi. ## I font HTML sicuri per il web Se sei alla ricerca di font idonei per il tuo sito internet, ti consigliamo di scegliere quelli che sono sicuri per il web. Sono già **preinstallati** sulla maggior parte dei sistemi oppure sono disponibili come font per il web su server pubblici. Utilizzando questi caratteri eviterai problemi di visualizzazione e il tuo sito web sarà rappresentato in modo uniforme nei diversi browser e sistemi operativi. ### Caratteri sicuri per il web I caratteri sicuri per il web sono quelli preinstallati nella maggior parte dei dispositivi e dei sistemi operativi. Tra i font sicuri per il web più noti troviamo: - Arial - Courier New - Helvetica - Times New Roman - Georgia - Verdana Questi caratteri sono ampiamente diffusi e offrono un’elevata compatibilità. ### Font per il web Oltre ai caratteri preinstallati puoi anche usare i [font per il web](https://www.ionos.it/digitalguide/siti-web/web-design/come-la-scelta-del-font-giusto-puo-rivelarsi-essenziale/), che vengono caricati da server pubblici e offrono un’ampia scelta di stili tipografici. Un fornitore famoso di font per il web è Google. Utilizzando i font per il web puoi personalizzare il design del tuo sito internet senza compromettere la compatibilità. Di seguito trovi un esempio di come puoi integrare un font per il web: ```html

Questo è un testo con il font per il web Roboto.

``` Consiglio Nel nostro articolo “[Responsive web design e caratteri: consigli sui font per il web](https://www.ionos.it/digitalguide/siti-web/web-design/responsive-web-design-e-scrittura-consigli-sui-font/)” trattiamo più approfonditamente il funzionamento e i vantaggi dei font per il web. ## Quali tag esistono per usare i font HTML? Due sono i [tag HTML](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/tag-html/) che puoi utilizzare per inserire i font nelle tue pagine web: `` e ``. Dall’introduzione di [HTML5](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/cose-lhtml5/) entrambi i tag sono considerati superati, motivo per cui si consiglia di gestire i caratteri HTML con [CSS](https://www.ionos.it/digitalguide/siti-web/web-design/come-imparare-il-css-una-guida-semplice/). ### `` Il tag `` è usato per selezionare e definire i font HTML. Utilizzando diversi [attributi HTML](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/attributi-html/) puoi definire il colore, le dimensioni e il tipo di carattere. Di seguito gli attributi e i relativi valori consentiti:
Attributo Valori Descrizione
`color` Nome del colore, codice di colore esadecimale o [valori RGB](https://www.ionos.it/digitalguide/siti-web/web-design/colori-rgb/) Determina il colore del testo
`size` Valore numerico da 1 a 7 Determina le dimensioni del font HTML
`face` Nomi dei caratteri HTML Inserisce la famiglia di font HTML desiderata
La sintassi di `` si presenta come segue: ```html .... ``` L’esempio di codice seguente mostra l’impiego del tag: ```html Tag font in HTML Questo è un testo di esempio. ``` ### `` Il tag `` funziona in modo analogo. Definisce la famiglia di font HTML e le sue specifiche, ma sempre per l’intero documento HTML. I suoi attributi corrispondono a quelli del tag ``. La sintassi è la seguente: ```html .... ``` L’esempio che segue illustra la marcatura del font con il tag ``: ```html Tag font in HTML Questo è un testo di esempio. ``` ## Definire la dimensione e il colore del carattere e la famiglia di font HTML Da quando è stato introdotto HTML5, i due tag indicati sopra **non sono più utilizzati**. Puoi comunque definire i font HTML per il tuo sito web come preferisci. Per impostare le dimensioni del carattere, procedi come indicato nell’esempio di codice seguente: ```html Dimensione del carattere La dimensione del carattere è = "1"
La dimensione del carattere è = "2"
La dimensione del carattere è = "3"
La dimensione del carattere è = "4"
La dimensione del carattere è = "5"
La dimensione del carattere è = "6"
La dimensione del carattere è = "7" ``` Per definire il colore: ```html Colore del carattere Questo testo è petrolio.
Questo testo è rosso scuro. ``` Qui scegliamo la famiglia di font HTML adatta: ```html Family font HTML Lucida Console
``` Se un visitatore o una visitatrice del tuo sito web non ha installato la famiglia di font HTML necessaria, il testo sarà visualizzato in un carattere standard. This is a markdown version of: [https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/font-html/](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/font-html/) for AI/LLM consumption.