source: spip-zone/_plugins_/webfonts/branches/webfonts2/README.md @ 107939

Last change on this file since 107939 was 107939, checked in by arnaud.berard@…, 3 years ago

un peut de doc et de lectures

  • Property svn:eol-style set to native
File size: 2.2 KB
Line 
1# WebFonts 2
2
3## Bénéfices
4
5L'utilisation du webfontloader,
6permet de mieux gérer le fallback utilisé lors du chargement
7ou de l'échec du chargement. wia des class `.wf-active`
8
9
10
11## Configuration:
12
13Pour pouvoir afficher les fonts via l'api GoogleFont, il est nécessaire d'avoir
14préalablement récupéré une clef d'accès aux API Google et sélectionné GoogleFont dans
15le APIs intérrogeables.
16
17Cette clef, peut être définie depuis un squelette ou un plugin
18
19```
20define('_GOOGLE_API_KEY', 'votre_clef_google_api');
21```
22
23ou via la configuration du plugin.
24
25## Utilisation
26
27### Depuis un plugin
28
29Utilisation de la pipeline `fonts_list()`.
30
31Ajouter au `paquet.xml`
32
33```xml
34<pipeline nom="fonts_list" inclure="prefix_plugin_pipelines.php" />
35```
36
37
38```php
39
40function prefix_plugin_fonts_list($fonts){
41        $fonts = array(
42                '0'=> array(
43                        'family'=> 'Open Sans',
44                        'variants'=> array('300','300italic','regular','italic','600'),
45                        'subsets'=>array()
46                ),
47                '1'=> array(
48                        'family'=> 'Roboto Condensed',
49                        'variants'=> array('700','800'),
50                        'subsets'=>array()
51                )
52        );
53       
54        return $fonts;
55}
56```
57
58
59
60----
61
62
63- GogleAPIKey : pour le listage et l'accès a la typthèque
64- TypeKit,… pour les autres fournisseurs de typo
65- Jeux de typo a charger et formats (woff, woff2), on génère la requète 
66depuis le html directement dans l'entête du site, pour éviter de maintenir un fichier css
67- Ajout du webfont loader développé par Google/TypeKit 
68https://github.com/typekit/webfontloader
69
70
71## Sources & Docs
72
73https://developers.google.com/fonts/docs/developer_api
74
75Article sur l'implémentation du webfont loader
76Présentation par cssTricks du webfontLoader :
77https://css-tricks.com/loading-web-fonts-with-the-web-font-loader/
78
79Google font : webfont loader https://github.com/typekit/webfontloader
80
81ZACH LEATHERMAN (Filament Group):
82webfont loading strategies : https://www.zachleat.com/web/comprehensive-webfonts/
83
84Etapes du chargement d'une font dans le navigateur :
85https://font-display.glitch.me/
86
87
88## ToDo
89
90- [] améliorer l'interface de selection : formulaire de fltrages des typos, affichage des résultats
91- [] selection des typos et des subsets utilisables
92- [] si la Google api key n'est pas définie, proposer dans la config
Note: See TracBrowser for help on using the repository browser.