L'utilizzo dei Web Font consente di sfruttare effetti tipicamente legati al mondo tipografico all'interno di pagine web, semplificando la creazione di layout ad alto impatto grafico e preservando l'utilizzo di testo anzichè immagini, pratica molto diffusa in passato.

L'utilizzo di un Web Font è possibile partendo da una serie di formati supportati dai browser, che sono EOT (Embedded Open Type), WOFF (Web Open Font Format) e il classico TTF (True Type Font). Tralasciando i problemi legali di distribuzione, generalmente i font sono forniti in questi formati, o vengono convertiti tramite appositi programmi o applicazioni web.

Una volta che si è in possesso di un font, è sufficiente inserire questa dichiarazione all'interno del CSS:

@font-face {
  font-family: 'fontname';
  src: url('webfont.eot'); /* IE9 */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('webfont.woff') format('woff'), /* standard */
        url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
        url('webfont.svg#svgFontName') format('svg'); /* iOS */
}

h1 {
  font-family: fontname;
}

L'uso di tutte queste dichiarazioni consente di gestire il fallback per browser più vecchi, ma la sintassi standard è quella che utilizza il formato WOFF.

Occore prestare attenzione al fatto che alcuni browser, come IE e FireFox, applicano le policy di Same Origin Policy ai font, per questioni di sicurezza, e quindi se il font viene preso da una CDN o comunque da un altro indirizzo, occorre che vengano inviate le opportune header, altrimenti il font non verrà visualizzato. In parole povere, si tratta di inviare un'header Access-Control-Allow-Origin, indicando a quali host (* indica tutti) viene concesso l'accesso, sfruttando una specifica nota come Cross-Origin Request Sharing (CORS).

Fermo restando che non si può avere il controllo di un servizio di terzi (che in genere sono comunque già opportunamenti configurati per lo scopo), se i font dovessero essere salvati su un server esterno, come nel caso dei CSS utilizzati da più siti, dovremo aggiungere queste informazioni al server web:

<configuration>
  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        </customHeaders>
    </httpProtocol>
  </system.webServer>
</configuration>

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

<FilesMatch "\.(ttf|otf|eot|woff)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>