@font-face, font embeded CSS

il problema del supporto dei font su web è sempre stato tema di disussione, ora attraverso quello che sono le variabili CSS introdotte in sperimentazione con CSS3, è possibile integrare un font nella pagina web stessa, senza averlo necessariamente installato nel sistema.
Come funziona, in pratica con il comando variabile @font-face si determina la posizione del font custom nel sistema e sul server, ed il nome attribuito al font stesso, i browser che supportano questa carateristica penseranno a mettere in cace i caratteri potendoli utilizzare nelle nostre pagine, richiamando il nome settato nella variabile alla voce font{}; o font-family{};.
Vediamo un esempio:

@font-face {
font-family: ‘Sketch Block’;
src: url(‘/skin/fonts/Sketch_Block.eot’);
src: local(‘Sketch Block’),
local(‘Sketch Block’),
url(‘/skin/fonts/Sketch_Block.ttf’) format(‘truetype’);
}

body {
font-family: “Sketch Block”, “Arial”, “Helvetica”, sans-serif;
}

I font ovviamente hanno una resa differente di Aliasing su ogni Browser, nel caso si volgia utlizzare il bold din un font custom per i browser non IE è necessario dichirare la variabile con il font bold e il font-weight.
I miei test si sono svolti su Firefox e Safari con esito positivo, mentre si IE e Chrome l’opzione non è andato a buon fine, probabilmente l’opzione su IE è supportata solo se il font è presente anche in versione .eot (OpenType); ho nontato inoltre che neanche su iPhone è supportato.