Version 4 — Décembre 2017 — Mist. GraphX
Le chargement de webfonts peut impacter sur le rendu des pages, sur l’accessibilité aux au contenus, sur les performances de votre page. Il convient conviens donc d’en être conscient et de les utiliser en connaissance de cause.
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.
Le plugin insert dans le head et en tête des autres styles les balise link ou style nécessaire nécessaires . 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.
Les stratégies de chargement de font comparées par https://www.zachleat.com/web/comprehensive-webfonts/
Utilisation du service google web font, via une requête.
La rêgle css @font-face : https://developer.mozilla.org/fr/docs/Web/CSS/@font-face
/* latin */
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
src: local('Open Sans Italic'), local('OpenSans-Italic'), url(https://fonts.gstatic.com/s/opensans/v15/xjAJXh38I15wypJXxuGMBogp9Q8gbYrhqGlRav_IXfk.woff2) format('woff2');
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;
}
-* 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).
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 <cadre class='php '>
define('_GOOGLE_API_KEY ', 'votre_clef_google_api');</code 'votre_clef_google_api ');
</cadre >
ou via la configuration du plugin .
ou via la configuration du plugin.
{{{**Méthode d'insertion}}}
Propose plusieurs techniques d'intégration/chargement de webfont
-* insertion standard via la balise<code > link</code >
balise -* insertion @import via une balise < code > style</code >
{{{**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 de webfont est retournée généré sous la forme <code>family:variant,family2:variant3
, les polices fonts configurées sont ajoutées à la pipeline font_list .
La liste des polices webfonts chargées via la pipeline, avec possibilité de pré-visualiser . prévisualiser
Description d’une font dans la font list :
Description d’une font dans la font list : -* family : Nom de la famille de police
Explication sur les subsets :
via le fichier mes_options.php
<cadre class=’php ’>
// Exemple d’ajout dans le pipeline « fonts_list » :
$GLOBALS[’spip_pipeline’][’fonts_list’] .= « |skel_webfonts » ;
function skel_webfonts($fonts)
$fonts = array(
’0’=> array(
’family’=> ’Open Sans’,
’variants’=> array(’300’,’300italic’,’regular’,’italic’,’600’)
),
’1’=> array(
’family’=> ’Montserrat’,
’variants’=> array(’regular’,’800’)
)
) ;
return $fonts ;
</ cadre >
Utilisation de la pipeline fonts_list()
.
Ajouter au paquet.xml
<pipeline nom="fonts_list" inclure="prefix_plugin_pipelines.php" />
Dans le fichier prefix_pipelines.php
Ajouter au paquet.<cadre class=’php ’>
xml
function prefix_plugin_fonts_list($fonts)
$fonts = array(
’0’=> array(
’family’=> ’Open Sans’,
’variants’=> array(’300’,’300italic’,’regular’,’italic’,’600’),
’subsets’=>array()
),
’1’=> array(
’family’=> ’Roboto Condensed’,
’variants’=> array(’700’,’800’),
’subsets’=>array()
)
) ;
return $fonts ;
</ cadre >
----
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/
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
https://fontlibrary.org/ https://www.fontsquirrel.com/tools/webfont-generator
v0.2.4 :