Italiano

Tutorial CSS

Tutorial CSS3

CSS Avanzato

Riferimenti CSS

CSS Reattivo

CSS - Web Fonts: A Beginner's Guide

Ciao a tutti, futuri designer web! Sono entusiasta di essere il vostro guida in questo emozionante viaggio nel mondo dei Web Fonts CSS. Come qualcuno che ha insegnato scienze informatiche per anni, posso dirvi che comprendere i caratteri è come imparare una nuova lingua - potrebbe sembrare intimidatorio all'inizio, ma una volta che ci si fa l'abitudine, rimarrete sorpresi di come trasformerà le vostre pagine web!

CSS - Web safe fonts

What Are Web Fonts?

Prima di addentrarci nei dettagli, iniziiamo con le basi. I Web Fonts sono caratteri personalizzati che potete utilizzare sul vostro sito web, indipendentemente dal fatto che siano installati sul computer di un utente. Sono come dare al vostro sito una voce unica!

Why Are Web Fonts Important?

Immaginate se ogni libro nel mondo utilizzasse lo stesso carattere. Noioso, vero? I Web Fonts vi permettono di esprimere la personalità del vostro sito e migliorare la leggibilità. Sono il segreto che può rendere il vostro sito diverso dal resto!

CSS Web Fonts - Font Format Types

Ora, parliamo dei diversi tipi di formati di caratteri. È come scegliere tra diversi gusti di gelato - ognuno ha le sue caratteristiche!

Format Description Browser Support
TTF/OTF TrueType Font / OpenType Font Tutti i browser moderni
WOFF Web Open Font Format Tutti i browser moderni
WOFF2 Web Open Font Format 2 La maggior parte dei browser moderni
EOT Embedded OpenType Internet Explorer
SVG Scalable Vector Graphics Vecchie versioni di iOS

Non preoccupatevi se questo sembra un mix di lettere adesso. Lo analizzeremo man mano!

CSS Web Fonts - Key Points

Prima di metterci le mani sporche con il codice, copriamo alcuni punti chiave:

  1. I Web Fonts vi permettono di utilizzare caratteri personalizzati sul vostro sito web.
  2. Vengono caricati da un server, non dal computer dell'utente.
  3. Potete utilizzare servizi come Google Fonts o ospitare i caratteri voi stessi.
  4. Esistono diversi formati di caratteri per la compatibilità con i browser.
  5. La regola @font-face viene utilizzata per definire caratteri personalizzati in CSS.

CSS Web Fonts - @font-face At-Rule

Ora, immergiamoci nel codice! La regola @font-face è come introdurre un nuovo carattere nella vostra pagina web. Ecco come appare:

@font-face {
font-family: 'MyAwesomeFont';
src: url('path/to/my-awesome-font.woff2') format('woff2'),
url('path/to/my-awesome-font.woff') format('woff');
font-weight: normal;
font-style: normal;
}

Analizziamo questo:

  • font-family: Questo è il nome che date al vostro carattere. Lo userete più tardi per applicare il carattere agli elementi.
  • src: Questo specifica dove trovare il file del carattere e in quale formato è.
  • font-weight e font-style: Questi definiscono le caratteristiche del carattere.

Dopo aver definito il vostro carattere, lo potete utilizzare così:

body {
font-family: 'MyAwesomeFont', sans-serif;
}

Questo dice al browser, "Ehi, usa MyAwesomeFont, ma se non lo trovi, ricorri a qualsiasi carattere sans-serif."

CSS Web Fonts - @font-face / font-stretch

La proprietà font-stretch è come una lezione di yoga per i vostri caratteri. Permette di allungare o comprimere il carattere. Ecco come potete usarla:

@font-face {
font-family: 'StretchyFont';
src: url('path/to/stretchy-font.woff2') format('woff2');
font-stretch: ultra-expanded;
}

.stretched-text {
font-family: 'StretchyFont';
font-stretch: 150%;
}

Questo farà sembrare il vostro testo come se fosse stato in palestra e abbia messo su massa!

CSS Web Fonts - Online Font Service

Utilizzare un servizio di font online è come ordinare takeout invece di cucinare - è conveniente e c'è una vasta gamma di scelta. Google Fonts è una scelta popolare. Ecco come potete usarlo:

  1. Andate su Google Fonts e selezionate un carattere che vi piace.
  2. Copiate il tag di link fornito e incollatelo nel vostro HTML <head>:
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
  1. Utilizzate il carattere nel vostro CSS:
body {
font-family: 'Roboto', sans-serif;
}

E voilà! Ora state utilizzando un carattere personalizzato da Google Fonts.

CSS Web Fonts - Import Font

Un altro modo per includere i web fonts è utilizzare la regola @import. È come invitare un carattere alla vostra festa CSS. Ecco come funziona:

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

body {
font-family: 'Roboto', sans-serif;
}

Questo metodo vi permette di mantenere tutte le dichiarazioni dei font nel vostro file CSS, il che piace a alcuni sviluppatori per l'organizzazione.

Conclusion

Congratulazioni! Avete appena fatto i vostri primi passi nel meraviglioso mondo dei CSS Web Fonts. Ricordate, come per ogni nuova abilità, la pratica fa la perfezione. Non abbiate paura di sperimentare con diversi caratteri e vedere come cambiano l'aspetto e la sensazione delle vostre pagine web.

Mentre chiudiamo, ecco una piccola storia dalla mia esperienza di insegnamento: Ho avuto una studentessa che stava lottando con il design web. Non riusciva a capire perché i suoi siti sembravano così... monotoni. Poi abbiamo coperto i web fonts, e fu come se una lampadina si fosse accesa. Improvvisamente, i suoi siti sono passati da noiosi a bellissimi. Questo è il potere dei web fonts!

Quindi andate avanti, giocate con i caratteri e vedete come le vostre pagine web prendono vita. Buon coding, e ricorda - nel mondo del design web, l'unica limitazione è la tua immaginazione!

Credits: Image by storyset

Tutorial precedente:
CSS - Riferimenti ai browser web
Prossimo tutorial:
CSS - Unità