Aggiunta di Font Personalizzati a una Pagina Web
I font svolgono un ruolo cruciale nel migliorare l'aspetto visivo di una pagina web. I designer creano numerosi font memorabili e belli per lasciare un'impressione duratura sugli utenti. I siti web con font poco curati possono avere difficoltà a catturare l'attenzione. Fortunatamente, esistono risorse che offrono accesso gratuito, permettendo a chiunque di utilizzare font già creati. Tuttavia, è importante notare che esistono anche font con licenza che richiedono l'acquisto, ed è fondamentale rispettare le leggi sul copyright per evitare violazioni.
Servizio Google Fonts
Sono disponibili molti font interessanti per l'uso gratuito. Esploriamo le opzioni offerte da https://fonts.google.com/. È semplice aggiungere un font di Google al markup.
Per prima cosa, eseguiamo il seguente esempio, che utilizza il font predefinito. L'elemento p ha le seguenti proprietà: font-family (nome del font), font-size (dimensione del font) e font-weight (spessore del font).
index.html
styles.css
La proprietà font-family non funziona perché il nostro progetto non riconosce ancora il font personalizzato "DM Sans". Aggiungiamo il font al progetto utilizzando https://fonts.google.com/.
Nel campo di input "Search fonts", digitare il nome del font desiderato. In questo caso, "DM Sans". Una volta visualizzato, fare clic sulla scheda di "DM Sans".
Nella pagina del font, fare clic sul pulsante "Get font".
Successivamente, fare clic sul pulsante "Get embed code".
Infine, copiare il link e incollarlo nel file HTML del progetto all'interno dell'elemento <head>. È importante inserire il link prima del collegamento ai propri stili personalizzati. In questo modo il browser caricherà prima i font personalizzati e poi applicherà gli stili che li utilizzano. Una volta aggiunto il link, "DM Sans" sarà disponibile come font personalizzato per il progetto. Ora, eseguire il progetto per verificare che tutto funzioni correttamente.
index.html
styles.css
Possiamo osservare la differenza tra il font personalizzato e il font predefinito. Inoltre, ogni browser ha i propri font predefiniti. Pertanto, è fondamentale sapere come utilizzare font personalizzati su un sito web.
Grazie per i tuoi commenti!
Chieda ad AI
Chieda ad AI
Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione
Awesome!
Completion rate improved to 2.56Aggiunta di Font Personalizzati a una Pagina Web
Scorri per mostrare il menu
I font svolgono un ruolo cruciale nel migliorare l'aspetto visivo di una pagina web. I designer creano numerosi font memorabili e belli per lasciare un'impressione duratura sugli utenti. I siti web con font poco curati possono avere difficoltà a catturare l'attenzione. Fortunatamente, esistono risorse che offrono accesso gratuito, permettendo a chiunque di utilizzare font già creati. Tuttavia, è importante notare che esistono anche font con licenza che richiedono l'acquisto, ed è fondamentale rispettare le leggi sul copyright per evitare violazioni.
Servizio Google Fonts
Sono disponibili molti font interessanti per l'uso gratuito. Esploriamo le opzioni offerte da https://fonts.google.com/. È semplice aggiungere un font di Google al markup.
Per prima cosa, eseguiamo il seguente esempio, che utilizza il font predefinito. L'elemento p ha le seguenti proprietà: font-family (nome del font), font-size (dimensione del font) e font-weight (spessore del font).
index.html
styles.css
La proprietà font-family non funziona perché il nostro progetto non riconosce ancora il font personalizzato "DM Sans". Aggiungiamo il font al progetto utilizzando https://fonts.google.com/.
Nel campo di input "Search fonts", digitare il nome del font desiderato. In questo caso, "DM Sans". Una volta visualizzato, fare clic sulla scheda di "DM Sans".
Nella pagina del font, fare clic sul pulsante "Get font".
Successivamente, fare clic sul pulsante "Get embed code".
Infine, copiare il link e incollarlo nel file HTML del progetto all'interno dell'elemento <head>. È importante inserire il link prima del collegamento ai propri stili personalizzati. In questo modo il browser caricherà prima i font personalizzati e poi applicherà gli stili che li utilizzano. Una volta aggiunto il link, "DM Sans" sarà disponibile come font personalizzato per il progetto. Ora, eseguire il progetto per verificare che tutto funzioni correttamente.
index.html
styles.css
Possiamo osservare la differenza tra il font personalizzato e il font predefinito. Inoltre, ogni browser ha i propri font predefiniti. Pertanto, è fondamentale sapere come utilizzare font personalizzati su un sito web.
Grazie per i tuoi commenti!
