Version 18 — Novembre 2019 — Mist. GraphX
Documentation en cours de rédaction, les todo et changements sont dans le fichier readme du plugin sur la zone
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.
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 autres styles.
En premier lieu dites-vous : les webfonts c’est le mal !
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é
Vous pouvez utiliser un outil comme Fontcatcher : https://meowni.ca/font-style-matcher/, pour choisir et affiner les différences entre votre webfont et la police système de fallback.
La Google API Key n’est nécessaire que si vous souhaitez mettre à jour le fichier json d’index, vous n’en avez pas besoin pour utiliser le plugin.
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.
Propose plusieurs techniques d’intégration/chargement de webfont
link
style
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 .
La liste des polices chargées via la pipeline, avec possibilité de pré-visualiser ainsi que le lien vers le spécimen de toutes vos webfonts chargées.
Description d’une font dans la pipeline font_list
Dans le cas typique de font-pairing, on distinguera souvent une font lead ou headline et une font de type copy. On peut donc classer nos typos dans la font-list en nommant les clefs du tableau, par type d’utilisation.
Chaque entrée du tableau font-list est constitué ainsi
via le fichier mes_options.php
// Exemple d'ajout dans le pipeline "fonts_list" :
$GLOBALS['spip_pipeline']['fonts_list'] .= "|skel_webfonts";
function skel_webfonts($fonts) {
$fonts = array(
'headline'=> array(
'family'=> 'Open Sans',
'variants'=> array('300','300italic','regular','italic','600')
),
'copy'=> array(
'family'=> 'Montserrat',
'variants'=> array('regular','800')
)
);
return $fonts;
}
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
function prefix_plugin_fonts_list($fonts){
$fonts = array(
'headline'=> array(
'family'=> 'Open Sans',
'variants'=> array('300','300italic','regular','italic','600'),
'subsets'=>array()
),
'copy'=> array(
'family'=> 'Roboto Condensed',
'variants'=> array('700','800'),
'subsets'=>array()
)
);
return $fonts;
}
Si vos webfonts ne se chargent pas dans Firefox ceci est souvent due à une erreur de type cross origin requests, modifiez ainsi votre fichier .htaccess.
# Allow-cross-origin
# https://developer.mozilla.org/fr/docs/Web/HTTP/CORS
# Add type
# https://stackoverflow.com/questions/2856502/css-font-face-not-working-with-firefox-but-working-with-chrome-and-ie?rq=1
AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff
AddType font/woff .woff2
# Fix cross origin requests CORS issues for webfonts
# https://crunchify.com/how-to-fix-access-control-allow-origin-issue-for-your-https-enabled-wordpress-site-and-maxcdn/
<IfModule mod_headers.c>
<FilesMatch "\.(ttf|otf|eot|woff|woff2)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>
# Fix cross origin requests CORS issues ALL
# allow js, css, webfont useful mainly for static pages with lots of CDN assets
# https://developer.mozilla.org/fr/docs/Web/HTTP/CORS
# https://crunchify.com/how-to-fix-access-control-allow-origin-issue-for-your-https-enabled-wordpress-site-and-maxcdn/
#<IfModule mod_headers.c>
# <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$">
# Header set Access-Control-Allow-Origin "*"
# </FilesMatch>
#</IfModule>
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/
Outils pour gérer les polices de fallback :
Utiliser les system-ui-fonts : (technique utilisée par Bootstrap4) :
https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
Font matcher : https://meowni.ca/font-style-matcher/
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.
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.
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;
}
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