Un appunto su come utilizzare i font non standard (a patto di essere in rogola con license e copyright) in un sito web tramite Css.
Tanto per cominciare, come al solito (!!), Internet Explorer lavora in un modo e tutti gli browser in un altro. Avremo bisogno quindi di inserire nel css sia le righe per l’interpretazione di IE che quelle per l’interpretazione normale.
@font-face
Avremo bisogno del modulo @font-face: già presente nei css dalla versione 2.1 ma sempre poco utilizzato perchè all’epoca non era ben supportato.
La pagina sarà un normalissimo (x)html e il css, oltre alle solite dichiarazioni, dovrà contenere la dicitura @font-face con il percorso in cui andremo a mettere il font scaricato.
Dovremo scaricare due versioni dello stesso font: la versione .ttf (true type font) valida per qualsiasi browser (tranne IE) e la versione .eot (embedded open type) valida per Internet Explorer.
A questo punto basta aggiungere nel css una cosa tipo questa:
@font-face
{
font-family: 'NomeDelFontTitle';
src: url('/percorso/NomeDelFont.eot');
src: local('NomeDelFont Title'),
local('NomeDelFont'),
url('/percorso/NomeDelFont.ttf') format('truetype');
}
Con questa semplice procedura possiamo ottenere simpatici risultati come questo esempio.