Pubblicato il

Visualizzare propri font nelle pagine web

Autori

Con il rilascio della versione beta di Firefox 3.1 sono state introdotte nuove funzionalità per i CSS.

Una delle regole supportate dalla nuova versione del noto browser permette di specificare un font che l’utente può scaricare per visualizzare la pagina come era nelle intenzioni dello sviluppatore.

@font-face è attualmente supportata su Mac OS X e Windows, ma non in Linux.

Sintassi

@font-face {
  font-family: <a-remote-font-name>;
  src: <uri>;
}

Valori

– specificare un nome di font che verrà utilizzato come font face
– URL della locazione del font file

Esempio

<html>
  <head>
    <title>Esempio Web Font</title>
    <style type="text/css" media="screen, print">
      @font-face {
        font-family: 'Guilty grunge';
        src: url('http://www.mainickweb.com/esempi/css/GUILTY__.TTF');
      }

      body {
        font-family: 'Guilty grunge', serif;
        font-size: 40px;
      }
    </style>
  </head>
  <body>
    This is Bitstream Vera Serif Bold.
  </body>
</html>

Ecco la pagina di esempio con il codice sopra.

Discutiamone su Twitter