CSS e Web Font

Anche se per ora non mi è capitato di implementarli, mi segno, a futura memoria, la procedura per inserire i web fonts in un sito.

• Caricare sul server i fonts (ovviamente in una cartella unica...)
• Inserire nel css un codice simile al seguente:

@font-face {
font-family: "Kimberley";
src: url(http://www.nomesito.it/fonts/kimberle.ttf) format("truetype");
}

h1 { font-family: "Kimberley", sans-serif }

In questo modo il font richiamato sarà scaricato direttamente dal browser laddove occorra. Occorre specificare una dichiarazione @font-face per ogni font che si vuole visualizzare nel sito. Per evitare lunghe liste di dichiarazioni @font-face nel css principale, si può utilizzare la dichiarazione @import con la sintassi seguente:

@import url(http://www.nomesito.it/fonts/index.css) all;
h1 { font-family: Goodfish, serif }

Nel file index.css saranno ovviamente esplicitate le regole @font-face.

Attenzione, però. a due particolari.

1. Il font sarà scaricato dal browser sul pc del visitatore, per cui occorre valutare bene le dimensioni dei file .ttf, affinché la pagina non risulti pesante al caricamento.
2. I browser evoluti leggono i web fonts, ma, per garantire la maggiore compatibilità possibile, occorrerebbe mettere a disposizione anche formati differenti dal truetype, utilizzando ad esempio un codice simile al seguente:

@font-face {
font-family: ‘MatchbookMatchbook’;
src: url(‘Matchbook.eot’);
src: local(‘Matchbook Matchbook’), local(‘Matchbook’), url(‘Matchbook.woff’) format(‘woff’), url(‘Matchbook.otf’) format(‘opentype’), url(‘Matchbook.svg#Matchbook’) format(’svg’);
}

Fonte: commento al blog di TomStardust