Carnet Wiki

Version 7 — 4 janvier — Mist. GraphX

Ce plugin est une ré-écriture du plugin Webfont, visant à rétablir les options qu’il proposait premièrement, et qui suite aux changement de politique du fournisseur, n’étaient plus disponibles.

  • Parcourir la typothèque GoogleFont en pré-visualisant les polices
  • Sélectionner des polices sans écrire la requête a la main (sinon l’informatique perd de son intérêt).

Le plugin insert dans le head et en tête des autres styles les balise link ou style nécessaire. C’est sa fonction première, garantir que vos déclarations de web font seront en premier avant vos autre style.

Le plugin insert dans le head et en tête des autres styles les balise link ou style nécessaire. La requête vers google font pour l’insertion des polices ne nécessite pas d’accès a l’api, cependant pour pouvoir utiliser la recherche dans l’index GoogleFont, utiliser le sélecteur générique, un accès a l’API est nécessaire.

Un peut de théorie

Le chargement de webfonts peut impacter sur le rendu des pages, sur l’accessibilité aux contenus, sur les performances de votre page. Il convient donc d’en être conscient et de les utiliser en connaissance de cause.
En premier lieu votre déclaration de font que ce soit via @import ou @font-face doit se trouver le plus tôt possible dans le head de la page.

Outre les considérations d’ordre esthétique et typographique, il est recommandéde ne pas utiliser plus de deux ou trois variantes de fonts , afin de ne pas détériorer les performances de chargement de vos pages .

-* de ne pas utiliser plus de deux ou trois variantes de fonts, afin de ne pas détériorer les performances de chargement de vos pages.

  • De toujours choisir une police de fallback dans vos déclarations css.
  • De toujours déclarer dans vos styles la graisse et le style (weight/style) de votre police dans vos déclarations css, ce sont les styles qui seront utilisé si la police de fallback est utilisé.
  • De vérifier que votre page sans charger les webfonts afin de juger les différence d’affichage si la police de fallback est utilisée.

Techniques de chargement de fonts :

Les stratégies de chargement de font comparées par https://www.zachleat.com/web/comprehensive-webfonts/

Google webfont :

Utilisation du service google web font, via une requête.

Les avantages : comme expliqué dans les considérations techniques de GoogleFont (https://developers.google.com/fonts/docs/technical_considerations), lorsque un navigateur web envoie une requête vers le service GoogleFont, la requête est étudié et renvoie ce qui est nécessaire au navigateur, le format le plus optimisé ainsi que les range unicode nécessaires pour la langue de consultation.

Les navigateurs web on tous leurs différences au niveau du rendu.
Certains vont préférer rendre la typo de fallback d’abord, et afficher ainsi l’information pour ensuite l’enrichir des styles. D’autres navigateurs masque le bloc pour n’effectuer le rendu que quand la police est chargée.

Le webfonloader permet donc entre autre d’uniformiser et contrôler ces différences de comportement entre les navigateurs.

Css

La rêgle css @font-face : https://developer.mozilla.org/fr/docs/Web/CSS/@font-face

  1. /* latin */
  2. @font-face {
  3.   font-family: 'Open Sans';
  4.   font-style: italic;
  5.   font-weight: 400;
  6.   src: local('Open Sans Italic'), local('OpenSans-Italic'), url(https://fonts.gstatic.com/s/opensans/v15/xjAJXh38I15wypJXxuGMBogp9Q8gbYrhqGlRav_IXfk.woff2) format('woff2');
  7.   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
  8. }

Télécharger

Fonctionnalités

  • Insertion auto des polices ajoutées a la pipeline font_list ou depuis la configuration.
  • Ajoute une pipeline pour que les plugins theme puisse activer leurs polices.
  • Propose un sélecteur générique permettant de parcourir l’index GoogleFont (nécessite l’API key, selecteur_generique).
  • Propose une page permettant de parcourir la typothèque googleFont, avec filtrage, recherche, prévisualisation (nécessite l’API key).

Configuration :

GoogleFonts API Key

Pour pouvoir afficher les fonts via l’api GoogleFont, il est nécessaire d’avoir préalablement récupéré une clef d’accès aux API Google et sélectionné GoogleFont dans les APIs interrogeables.

Cette clef, peut être définie depuis un squelette ou un plugin, via un define.

define('_GOOGLE_API_KEY', 'votre_clef_google_api');

ou via la configuration du plugin.

Méthode d’insertion

Propose plusieurs techniques d’intégration/chargement de webfont

  • insertion standard via la balise link
  • insertion @import via une balise style

Sélection des webfonts

Un sélecteur générique permet de proposer les webfonts disponibles depuis le fichier index google_font la liste des webfonts est retournée sous la forme family:variant,family2:variant3 , les polices configurées sont ajoutées à la pipeline font_list .

Liste des polices chargées

La liste des polices chargées via la pipeline, avec possibilité de pré-visualiser.

Pour l’intégrateur

Pipeline font_list

Description d’une font dans la font list :

  • family : Nom de la famille de police
  • variants : italic,bold
  • subsets : les subsets sont nécessaires uniquement pour les navigateurs ne supportant pas la propriété unicode-range, pour les autres les subsets sont ignorés, et le navigateur choisira ce qui est nécessaire dans le DOM.

Explication sur les subsets :

Depuis un squelette

via le fichier mes_options.php

  1. // Exemple d'ajout dans le pipeline "fonts_list" :
  2. $GLOBALS['spip_pipeline']['fonts_list'] .= "|skel_webfonts";
  3.  
  4. function skel_webfonts($fonts) {
  5.         $fonts = array(
  6.                 '0'=> array(
  7.                         'family'=> 'Open Sans',
  8.                         'variants'=> array('300','300italic','regular','italic','600')
  9.                 ),
  10.                 '1'=> array(
  11.                         'family'=> 'Montserrat',
  12.                         'variants'=> array('regular','800')
  13.                 )
  14.         );
  15.     return $fonts;
  16. }

Télécharger

Depuis un plugin

Utilisation de la pipeline fonts_list() .

Ajouter au paquet.xml

  1. <pipeline nom="fonts_list" inclure="prefix_plugin_pipelines.php" />

Dans le fichier prefix_pipelines.php

  1. function prefix_plugin_fonts_list($fonts){
  2.         $fonts = array(
  3.                 '0'=> array(
  4.                         'family'=> 'Open Sans',
  5.                         'variants'=> array('300','300italic','regular','italic','600'),
  6.                         'subsets'=>array()
  7.                 ),
  8.                 '1'=> array(
  9.                         'family'=> 'Roboto Condensed',
  10.                         'variants'=> array('700','800'),
  11.                         'subsets'=>array()
  12.                 )
  13.         );
  14.        
  15.         return $fonts;
  16. }

Télécharger

Sources & Docs

https://developers.google.com/fonts/docs/developer_api

Article sur l’implémentation du webfont loader Présentation par cssTricks du webfontLoader : https://css-tricks.com/loading-web-fonts-with-the-web-font-loader/

Google font : webfont loader https://github.com/typekit/webfontloader

ZACH LEATHERMAN (Filament Group) : webfont loading strategies : https://www.zachleat.com/web/comprehensive-webfonts/

Etapes du chargement d’une font dans le navigateur : https://font-display.glitch.me/

**Des plugins spip ou techniques d’intégration d’utilisation de font/polices

Plugin spip permettant d’utiliser les images typographiques via un modèle https://contrib.spip.net/Choix-Police-Typo

Le filtre image_typo :

https://www.spip.net/fr_article3325.html

Typothèques

https://fontlibrary.org/ https://www.fontsquirrel.com/tools/webfont-generator

ToDo

Changelogs

v0.2.4 :

  • [X] améliorer l’interface de selection : formulaire de fltrages des typos, affichage des résultats
  • [X] selection des typos et des subsets utilisables
  • si la Google api key n’est pas définie, proposer dans la config

Retour à la version courante

Toutes les versions

Se connecter