Cette section est close pour le moment.
Mais je n'arrête pas la veille, loin de là. Retrouvez mes projets sur Github et sur cette page qui sera à jour plus régulierement


Ressources

Définition de ressource : (nom féminin) Qui peut fournir ce dont on a besoin.
Vous l'aurez compris, sur cette page ce ne sont pas vraiment des tutoriels, c'est plutôt des penses-bêtes plus ou moins fournis mais qui vous permettront d'avoir des bases concernant la programmation.
Recherche par tag

Changer sa police avec le service Google web fonts

Changer sa police avec le service Google web fonts
Publication : Le 02/01/2013 à 23:51:36

Préambule

Cette ressource est sans doute la plus simple qui ait été mise en ligne sur le site. Mais cela faisait un petit bout de temps que je n'avais pas publié de nouvel article.

Introduction

Les développeurs qui souhaitent avoir une police exotique ont plusieurs possibilités. Par exemple l'utilisation de @font-face ou des web fonts de Google.

Le service est très simple à utiliser, la preuve

Choisir sa police

C'est dans plus de 600 polices que vous aurez à choisir votre typographie. Le choix est assez conséquent. Vous pouvez affiner votre recherche via différents filtres et choisir quelle preview vous voulez utiliser, un mot, un paragraphe (que vous pourrez remplir afin de voir facilement ce que donne la typographie avec un texte donné, pratique pour voir à quoi vont ressembler des titres).

Une fois la police choisie vous pouvez aller sur la partie "Quick Use".

Utilisation

Vous aurez, selon la police, le choix de sélectionner différents styles (gras, italique, etc...).

A chaque choix vous verrez la jauge de chargement de la page qui va changer. Cette indication vous aidera à sélectionner les styles qu'il vous faut tout en faisant attention au temps de chargement.

Différents formats d'importation du style vous seront proposés.

- html
- @import
- javascript
// HTML
<link href='http://fonts.googleapis.com/css?family=Donegal+One&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

// CSS
@import url(http://fonts.googleapis.com/css?family=Donegal+One&subset=latin,latin-ext);

// Javascript
<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Donegal+One::latin,latin-ext' ] }
  };
  (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>
Dans votre fichier css, pour utiliser la police vous aurez plus qu'à appeler le nom de la police fournie par Google :
p{ font-family: 'Le nom donné par google', Arial, serif; font-weight: 400; }

Conclusion

L'utilisation de ce service est simple. Cependant certaines personnes ne sont pas "à l'aise" avec ce service car elles n'aiment pas être dépendant d'un tiers extérieur. J'en faisais partie mais ma position à évoluer sur ce point.

Sur le même thème

Changer sa police avec le service Google web fonts
Publication : Le 02/01/2013 à 23:51:36

Tags

Tags : tools / CSS

Suggestion :

Identifier son site avec un favicon, simple mais indispensable

Identifier son site avec un favicon, simple mais indispensable