Includere font particolari nelle nostre pagine web – CSS3

Spesso accade che durante la fase di sviluppo di una nostra pagina web ci imbattiamo nell’esigenza di dover o voler utilizzare font particolari.
Come ben sappiamo, e se non lo sappiamo adesso lo sappiamo, i font utilizzati nelle pagine web, non risiedono nella pagina o nel sito che stiamo visitando, ma bensì sul nostro computer.
Realizzare una pagina che utilizza font particolari comporta dei problemi, in quanto essa potrà essere vista nel suo massimo splendore solo dai pc che hanno installati i font interessati.
Per ovviare a questo problema, oggi ci vengono in contro due possibili soluzioni:

• i Google Web Fonts
• la regola @font-face del CSS3

Google Web Fonts

Google Web Fonts è una raccolta font open-source ottimizzati per il web. Includerli nei propri progetti è estremamente facile. Si raggiunge il sito www.google.com/webfonts si sceglie o si cerca il font che più ci interessa e lo si aggiunge alla raccolta. Una volta ultimata la selezione si preme il tasto USE presente in basso alla pagina e si sceglie il metodo di incorporazione preferito.
Ci sono tre modi per incoroporare i font nelle nostre pagine e cioè: Standard @import e JavaScript:
Standard:

<link href='http://fonts.googleapis.com/css?family=Wendy+One|Donegal+One|Fjalla+One' rel='stylesheet' type='text/css'>

@import

@import url(http://fonts.googleapis.com/css?family=Wendy+One|Donegal+One|Fjalla+One);

JavaScript

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Wendy+One::latin', 'Donegal+One::latin', 'Fjalla+One::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>

Una volta incorporati possiamo utilizzarli nei nostri css o nei nostri stili utilizzando le solite regole:

font-family: 'Wendy One', sans-serif;
font-family: 'Donegal One', serif;
font-family: 'Fjalla One', sans-serif;

Regola @font-face del CSS3

Se centinaia di font messi a disposizione da Google non ci bastano, possiamo ricorrere alla regola @font-face del CSS3. In questo caso i file del font dovranno risiedere on line assieme al nostro sito o web application.
Il codice da utilizzare nel nostro file css è il seguente:

<style> 
@font-face{
     font-family: ilMioFont;
     src: url('cartellafont/Sansation_Light.ttf'),
          url('cartellafont/Sansation_Light.eot'); /* IE9+ */
}

div{
     font-family:ilMioFont;
}
</style>

Firefox, Chrome, Safari, e Opera supportano font di tipo .ttf (True Type Fonts) e .otf (OpenType Fonts).
Internet Explorer 9+ supporta solo font di tipo .eot (Embedded OpenType)

Come al solito non riescono a mettersi d’accordo

Nota: Internet Explorer 8 e precedenti, non supportano questa nuova regola CSS.