Aggiunta di Font Personalizzati a una Pagina Web
I font influenzano in modo significativo l'aspetto e la percezione di un sito web. Una tipografia di alta qualità migliora la leggibilità e rende un design più memorabile. Molti font sono disponibili gratuitamente, mentre altri richiedono una licenza; è sempre necessario rispettare le regole sul copyright.
Servizio Google Fonts
Sono disponibili molti font interessanti per l'uso gratuito. Esploriamo le opzioni offerte da https://fonts.google.com/. Aggiungere un font di Google al markup è semplice.
Per prima cosa, eseguiamo il seguente esempio, che utilizza il font predefinito. L'elemento p presenta 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, applicando poi 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
How do I add a Google Font to my HTML file?
What is the purpose of the preconnect links in the head section?
Can you explain the difference between default and custom fonts?
Fantastico!
Completion tasso migliorato a 2.56Aggiunta di Font Personalizzati a una Pagina Web
Scorri per mostrare il menu
I font influenzano in modo significativo l'aspetto e la percezione di un sito web. Una tipografia di alta qualità migliora la leggibilità e rende un design più memorabile. Molti font sono disponibili gratuitamente, mentre altri richiedono una licenza; è sempre necessario rispettare le regole sul copyright.
Servizio Google Fonts
Sono disponibili molti font interessanti per l'uso gratuito. Esploriamo le opzioni offerte da https://fonts.google.com/. Aggiungere un font di Google al markup è semplice.
Per prima cosa, eseguiamo il seguente esempio, che utilizza il font predefinito. L'elemento p presenta 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, applicando poi 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!
