Importare fonts esterni con CSS

Importare un font esterno all’interno dei nostri siti web è un’operazione molto semplice e che avviene all’interno del foglio di stile (.css).

Per poter inserire il font e ,sopratutto, per garantire la compatibilità con i vari browser  occorrono quattro versioni del file che cambiano per estensione:  .eot , .woff , .ttf e .svg.

Una volta inseriti i file nel server del nostro sito, magari in una cartella chiamata font, non rimane altro che importarli attraverso il foglio di stile.

CSS

 
@font-face {
    font-family: 'mioFont';
    src: url('fonts/ mioFont.eot');
    src: url('fonts/ mioFont.eot?#iefix') format('embedded-opentype'),
    url('fonts/ mioFont.woff') format('woff'),
    url('fonts/ mioFont.ttf') format('truetype'),
    url('fonts/ mioFont.svg#mioFont') format('svg');
   font-weight: normal;
   font-style: normal;
 
}
 

Per richiamare il font sarà necessaria una dicitura del genere: 

 
#elemento
{
     font-family: 'mioFont';
}