CSS: la regola @font-face

CSS: la regola @font-face

La regola font-face dei CSS è un'importante caratteristica per la personalizzazione dei font su un sito web. Essa consente di utilizzare font personalizzati per la visualizzazione dei testi all'interno di una pagina web.

La sintassi della regola font-face prevede l'utilizzo di un URL per definire il percorso del file font, il formato del font, il nome del font e altre opzioni come lo stile e il peso del font.

Ad esempio, la seguente regola definisce un font personalizzato chiamato "MyFont" utilizzando il formato TrueType e specificando il percorso del file font:


@font-face {
    font-family: 'MyFont';
    src: url('myfont-regular.ttf') format('truetype');
    font-weight: normal;
}

@font-face {
    font-family: 'MyFont';
    src: url('myfont-bold.ttf') format('truetype');
    font-weight: bold;
}

@font-face {
    font-family: 'MyFont';
    src: url('myfont-italic.ttf') format('truetype');
    font-style: italic;
}

Una volta definita la regola font-face, è possibile utilizzare il nuovo font all'interno del sito web utilizzando il nome definito nella regola font-face:


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

In questo esempio, il font MyFont verrà utilizzato per i testi all'interno del corpo della pagina, ma se il font non fosse disponibile sul computer dell'utente, verrà utilizzato il font di backup sans-serif.

La regola font-face offre la possibilità di utilizzare font personalizzati su un sito web, migliorando l'esperienza dell'utente e consentendo di creare un design unico e accattivante. Tuttavia, è importante utilizzare font leggibili e di facile lettura per garantire una buona accessibilità e usabilità del sito web.

Torna su