fonds d'écran - créations numériques - webmastering - photograhie - création de site - référencement efficace


 

 

Beaucoup de webmasters ou de graphistes désirent réaliser des sites 'originaux ' en y intégrant des polices de caractères un peu plus 'jolies' que les standards habituels. Malheureusement les navigateurs ne sont pas toujours compatibles et ces 'polices' exotiques et embarquées ne produisent pas du tout l'effet attendu.

Heureusement arrive la norme 'CSS3' qui va nous faciliter ainsi la tache et permettre de les afficher quasiment sans aucun problème ...

Il existe deux solutions réellement efficaces pour celà :

Google Web Fonts et @font-face ...

- 1 Google Web Fonts:

A l'heure actuelle, Google Web Fonts compte 206 familles de polices. Il vous suffit de vous rendre sur ce site pour les découvrir, faire votre choix, mais sans oublier ensuite de demander le code ! Prenons par exemple la font appelée " rosario", vous cliquez sur 'Add to collection', puis sur 'use', tout en bas à droite:

google web font css4

Quelques options supplémentaires, puis un scroll dans la page et vous obtenez ainsi le code d'appel à utiliser dans votre page web, plusieurs sont d'ailleurs disponibles:

- CSS:

<link href='http://fonts.googleapis.com/css?family=Rosario&v2' rel='stylesheet' type='text/css'>

- @import:

@import url(http://fonts.googleapis.com/css?family=Rosario&v2);

- JavaScript:

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Rosario: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>

Google, lui-même vous donne les instructions pour un bon fonctionnement, vous pouvez même cliquer sur 'download your collection' pour télécharger la ou les polices choisies. En suivant les liens vous pourrez même voir comment obtenir et utilise 'Google Font API' sur vos pages web, avec des exemples à la clé ...

Dans votre code html:

< link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name"> (supprimez l'espace après le < )

Dans votre feuille de style:

CSS selector { font-family: 'Font Name', serif; }

ou même mieux, si vous désirez plusieurs fonts :

http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans

Les solutions ou combinaisons sont quasi infinies ... et Google vous explique même comment les utiliser en profitant au maximum des propriétés de la CSS3:

google web font css3

- 2 @font-face:

(qui a personnellement ma préférence)

Pourquoi ? Parceque l'on dispose d'un choix de polices assez variées, mais l'on peut également utiliser une fonte qui ne se trouve pas sur le site lui même ! Donc plus pratique ...

Le site le plus pratique pour utiliser le 'système' @font-face, outre celui du W3C, est bien celui du 'generator' . Vous avez la possibilité de chercher parmis le fonts déjà présentes sur le site ou celle d'uploader une ou plusieurs fonts de votre choix que vous avez en local.

@font-face generator

Une fois votre choix fait, il vous suffit de suivre la procédure donnée sur le site qui est très simple : choisir une ou plusieurs polices, cliquer sur la ligne d'exemple, puis en haut sur "@font-face Kit", ceci autant de fois que vous le désirez ...

@font-face kit

Vous noterez que 4 cases sont cochées : TTF, pour les polices normales, EOT pour résoudre certains problèmes sous Internet Explorer,WOFF pour d'autres solution et SVG pour les sites destinés aux solutions et aux sites portables.

Cliquez alors pour télécharger ' download @font-face' et vous obtiendrez un fiichier *.zip avec les fonts ainsi même que le mode d'emploi pour les mettre en fonction dans vootre page web. Vous aurez dedans 4 ou un multiple de 4 fonts (si celle que vous avez choisie peut se décliner en versions 'bold', 'italic' ou autre, une page html d'exemple et le code à insérer dans la css, par exemple :

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

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

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

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

Deux exemples ici directement en ligne avec cette police et ses quatre variantes en CSS3. (avec @font-face) ... un autre avec Google Web Fonts . Vous pouvez également en voir un autre exemple sur un petit blog : Pictures World , le monde de l'image ... qui changera de temps en temps de 'font' , rien que pour le plaisir ...

 

Vous verrez ainsi, également qu'il faut bien choisir sa police, car malgré tout certains petits problèmes, dus uniquement à la font elle-même peuvent se produire ... donc, bien la choisir !