Trucsweb.com

Trucsweb 1997-2017 - 20 ans de partage.

CSS

Typographie

RDFFav

Police de caractères « Google Fonts »

Google offre des polices d’écriture ou polices de caractères pour page web tout à fait gratuitement.fonts, police, caractères, @font-face

Je me souviens de la patente Microsoft pour installer une police de caractères, exclusivement pour les usager d’Internet Explorer. Je ne me souviens pas si j’y était arrivé mais l’effort n’en valait pas la peine! Chaque visiteur étant forcé de faire une installation quasi manuelle. Jusqu’à ce que Google arrive avec ces jeux de polices d’écriture ou polices de caractères spécialement conçu pour le Web et ce, tout a fait gratuitement.

Je ne sais pas ce qui explique ce retard. Peut être parce que les polices par défaut font l’affaire. C’est aussi vrais que rien n’est plus kétaine que de l’abus de couleurs, grosseurs et de police de caractères dans une présentation graphique. C’est sans doute aussi que c’est toute une job de bras que de réaliser une police de caractère digne de ce nom. Ergonomique, original, et complètes! Sans parler que les applications sont très spécialisé. Comme si Photoshop servait exclusivement à faire des boutons ...à 4 trous! Plutôt rare à l’époque, on est passé du FontLab Studio à 1000$ au service en ligne gratuit comme BitFontMaker2™ BitMap Font Editor. Les solutions abordables ne manque pas aujourd’hui.

Google Fonts
Google fonts Google fonts

Mais voilà, Google a l’ambition de rassembler l’ensemble des polices de caractères de l’humanité, rien de moins. Inquiétant à long terme, c’est un risque bien minime dans la mesure où il ne s’agit que de « style » tout à fait complémentaire. Par contre le poids est nettement un problème! D’autant que Le poids d’une page web est une lacune répandue, notamment pour la capacité des mobile, iPod, iPhone et même les tablettes avec à penne 1 Mo de mémoire!

C’est donc la seule précaution à prendre, choisir avec soin un ou deux police de caractères maximum. Se limiter au format normal (Normal 400) et surtout choisir un seul jeu de caractères (set), dans le cas de francophone « Latin (latin) ».

  1. Rendez-vous sur https://www.google.com/fonts
  2. Taper un texte
  3. Sélectionner la police
  4. Utiliser la police
Utiliser les polices

Il faut d’abord déclarer la police avec une référence, localement après y avoir déposer les fichiers téléchargés ou directement sur les serveur de Google, puisque les serveur de Google sont plus rapide que les autres (!). Dans mon exemple j’utilise deux polices : « Noto Sans » et « Lobster ». On notera qu’il est possible d’ajouter plusieurs polices en les séparent par le séparateur | .

<link href="http://fonts.googleapis.com/css?family=Noto+Sans|Lobster" rel="stylesheet" type="text/css">


/* ou encore avec @import */
@import url(http://fonts.googleapis.com/css?family=Noto+Sans|Lobster);

Google offre aussi un javascript pour ce faire

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ "Noto+Sans::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>
Créer une classe

Rien de plus simple, récupérer le nom de la police (Noto Sans) pour y faire référence : font-family: "Noto Sans", sans-serif;.

<style>
h1 { font-family: "Lobster", sans-serif; }
p.noto { font-family: "Noto Sans", sans-serif;  }
</style>

<h1>Ma police Google Fonts</h1>
<p class="noto">Ma police Google Font avec une classe perso.s</p>
Exemple : Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

, Analyste programmeurConception oznogco multimédia (http://oznogco.com), Trucsweb
Dernière mise à jour :

Commentaires

8/10 sur 1 revues.
       Visites : 16697 - Pages vues : 17219
X

Trucsweb.com Connexion

X

Trucsweb.com Mot de passe perdu

X

Trucsweb.com Conditions générales

Conditions

Responsabilité

La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

Droit applicable et juridiction compétente

Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

X

Trucsweb.com Trucsweb

X

Trucsweb.com Glossaire

X

Trucsweb.com Trucsweb

X

Trucsweb.com Trucsweb

Conditions

Aucun message!

Merci.

X
Aucun message!
X

Trucsweb.com Créer un compte