react-fontpicker-ts 0.0.1 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (243) hide show
  1. package/README.md +88 -8
  2. package/dist/index.css +2417 -1361
  3. package/dist/index.css.map +1 -1
  4. package/dist/index.js +1069 -90
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.mjs +1070 -91
  7. package/dist/index.mjs.map +1 -1
  8. package/dist/sprite.1.1.5x-XMWDUN3B.png +0 -0
  9. package/dist/sprite.1.1x-HDD5SCOX.png +0 -0
  10. package/dist/sprite.1.2x-R5OZY447.png +0 -0
  11. package/dist/sprite.10.1.5x-NKFUPOTH.png +0 -0
  12. package/dist/sprite.10.1x-N74JTAKW.png +0 -0
  13. package/dist/sprite.10.2x-XVSCEJWZ.png +0 -0
  14. package/dist/sprite.11.1.5x-R3M3D3TB.png +0 -0
  15. package/dist/sprite.11.1x-7SYW6ANG.png +0 -0
  16. package/dist/sprite.11.2x-OXV2QAU2.png +0 -0
  17. package/dist/sprite.12.1.5x-RK5K5CBC.png +0 -0
  18. package/dist/sprite.12.1x-2UXSH2BC.png +0 -0
  19. package/dist/sprite.12.2x-ILRYIKLL.png +0 -0
  20. package/dist/sprite.13.1.5x-ZVKWAYBW.png +0 -0
  21. package/dist/sprite.13.1x-W35QRJN6.png +0 -0
  22. package/dist/sprite.13.2x-6QDJKTFQ.png +0 -0
  23. package/dist/sprite.14.1.5x-YQ5TVP4X.png +0 -0
  24. package/dist/sprite.14.1x-P62F5ZHB.png +0 -0
  25. package/dist/sprite.14.2x-FJMFBXNN.png +0 -0
  26. package/dist/sprite.15.1.5x-RSJTKGXJ.png +0 -0
  27. package/dist/sprite.15.1x-VT6OXOD4.png +0 -0
  28. package/dist/sprite.15.2x-O6JPUDO5.png +0 -0
  29. package/dist/sprite.16.1.5x-IF5CXL2K.png +0 -0
  30. package/dist/sprite.16.1x-BH3FBEAS.png +0 -0
  31. package/dist/sprite.16.2x-GWMKGITZ.png +0 -0
  32. package/dist/sprite.17.1.5x-VZ4PAF6Q.png +0 -0
  33. package/dist/sprite.17.1x-NZ7X6YT5.png +0 -0
  34. package/dist/sprite.17.2x-6XQTSIXG.png +0 -0
  35. package/dist/sprite.18.1.5x-SWHUCEVQ.png +0 -0
  36. package/dist/sprite.18.1x-57L6JD6F.png +0 -0
  37. package/dist/sprite.18.2x-WWYT5NSE.png +0 -0
  38. package/dist/sprite.19.1.5x-3RQQUIO3.png +0 -0
  39. package/dist/sprite.19.1x-3LJ7M6AR.png +0 -0
  40. package/dist/sprite.19.2x-IK6T6HLQ.png +0 -0
  41. package/dist/sprite.2.1.5x-K5NNDIW3.png +0 -0
  42. package/dist/sprite.2.1x-6JLC6P3G.png +0 -0
  43. package/dist/sprite.2.2x-265H7CFZ.png +0 -0
  44. package/dist/sprite.20.1.5x-JXDIFNZH.png +0 -0
  45. package/dist/sprite.20.1x-XNU2TJ6Q.png +0 -0
  46. package/dist/sprite.20.2x-XOZTSZTY.png +0 -0
  47. package/dist/sprite.21.1.5x-NPYIH4LB.png +0 -0
  48. package/dist/sprite.21.1x-SFNMHFDI.png +0 -0
  49. package/dist/sprite.21.2x-ZLQ2B6IK.png +0 -0
  50. package/dist/sprite.22.1.5x-BEHLPSYK.png +0 -0
  51. package/dist/sprite.22.1x-PGMCTRGT.png +0 -0
  52. package/dist/sprite.22.2x-2X3QIOVQ.png +0 -0
  53. package/dist/sprite.23.1.5x-XQITU43V.png +0 -0
  54. package/dist/sprite.23.1x-C765STXM.png +0 -0
  55. package/dist/sprite.23.2x-RFIXCUQ5.png +0 -0
  56. package/dist/sprite.24.1.5x-AWFULXDG.png +0 -0
  57. package/dist/sprite.24.1x-X3VC4KER.png +0 -0
  58. package/dist/sprite.24.2x-VKZEB2CH.png +0 -0
  59. package/dist/sprite.25.1.5x-J2DDFQLL.png +0 -0
  60. package/dist/sprite.25.1x-XQF4XMN7.png +0 -0
  61. package/dist/sprite.25.2x-QTVFDGUX.png +0 -0
  62. package/dist/sprite.26.1.5x-OJL22L3R.png +0 -0
  63. package/dist/sprite.26.1x-CGQ7DGJJ.png +0 -0
  64. package/dist/sprite.26.2x-H3G2GZUW.png +0 -0
  65. package/dist/sprite.27.1.5x-GAOIHSTF.png +0 -0
  66. package/dist/sprite.27.1x-SOKO7GY2.png +0 -0
  67. package/dist/sprite.27.2x-ITHLNV7Y.png +0 -0
  68. package/dist/sprite.28.1.5x-L6PPUSPI.png +0 -0
  69. package/dist/sprite.28.1x-A7MKNFXG.png +0 -0
  70. package/dist/sprite.28.2x-K77CZFAS.png +0 -0
  71. package/dist/sprite.29.1.5x-NKWAULUW.png +0 -0
  72. package/dist/sprite.29.1x-CDNA2EMC.png +0 -0
  73. package/dist/sprite.29.2x-O3XIGYZ7.png +0 -0
  74. package/dist/sprite.3.1.5x-IJHYR3HX.png +0 -0
  75. package/dist/sprite.3.1x-7WCEQE3K.png +0 -0
  76. package/dist/sprite.3.2x-5BRAAPEV.png +0 -0
  77. package/dist/sprite.30.1.5x-5J52YR4L.png +0 -0
  78. package/dist/sprite.30.1x-O2IEWRXU.png +0 -0
  79. package/dist/sprite.30.2x-HPGJXVZN.png +0 -0
  80. package/dist/sprite.31.1.5x-UJPCJFMG.png +0 -0
  81. package/dist/sprite.31.1x-U2J2WYAY.png +0 -0
  82. package/dist/sprite.31.2x-HKQONG4Z.png +0 -0
  83. package/dist/sprite.32.1.5x-MZ6JDYEM.png +0 -0
  84. package/dist/sprite.32.1x-TP2UTYLR.png +0 -0
  85. package/dist/sprite.32.2x-RZPSV5UX.png +0 -0
  86. package/dist/sprite.33.1.5x-TCAZHHP2.png +0 -0
  87. package/dist/sprite.33.1x-7S6OSG77.png +0 -0
  88. package/dist/sprite.33.2x-TICPWNE4.png +0 -0
  89. package/dist/sprite.34.1.5x-2NTL4MDB.png +0 -0
  90. package/dist/sprite.34.1x-IXYJYOUK.png +0 -0
  91. package/dist/sprite.34.2x-5GUPUSQT.png +0 -0
  92. package/dist/sprite.35.1.5x-7H3ORIFA.png +0 -0
  93. package/dist/sprite.35.1x-EPNBZ6SY.png +0 -0
  94. package/dist/sprite.35.2x-TXYDDKLH.png +0 -0
  95. package/dist/sprite.36.1.5x-JZYN2W6L.png +0 -0
  96. package/dist/sprite.36.1x-IZPAQFY7.png +0 -0
  97. package/dist/sprite.36.2x-QLFTLI4X.png +0 -0
  98. package/dist/sprite.37.1.5x-4JR4JB6C.png +0 -0
  99. package/dist/sprite.37.1x-6HIYOKB6.png +0 -0
  100. package/dist/sprite.37.2x-BJDJQKMI.png +0 -0
  101. package/dist/sprite.38.1.5x-A4MINTST.png +0 -0
  102. package/dist/sprite.38.1x-2ZSFTMRI.png +0 -0
  103. package/dist/sprite.38.2x-QH4TU7B7.png +0 -0
  104. package/dist/sprite.39.1.5x-GLTUGRUY.png +0 -0
  105. package/dist/sprite.39.1x-J3WKKDRT.png +0 -0
  106. package/dist/sprite.39.2x-IGNBAI52.png +0 -0
  107. package/dist/sprite.4.1.5x-MZSU4BIU.png +0 -0
  108. package/dist/sprite.4.1x-K2ZKVXBW.png +0 -0
  109. package/dist/sprite.4.2x-36JMJ5TY.png +0 -0
  110. package/dist/sprite.40.1.5x-KQ4UMFBJ.png +0 -0
  111. package/dist/sprite.40.1x-UAV75KRX.png +0 -0
  112. package/dist/sprite.40.2x-E6HWOLRK.png +0 -0
  113. package/dist/sprite.41.1.5x-2V2IOC5B.png +0 -0
  114. package/dist/sprite.41.1x-S454BCDL.png +0 -0
  115. package/dist/sprite.41.2x-O35F2TH5.png +0 -0
  116. package/dist/sprite.42.1.5x-55VRTVTZ.png +0 -0
  117. package/dist/sprite.42.1x-N5BTF34E.png +0 -0
  118. package/dist/sprite.42.2x-C7GLPHJL.png +0 -0
  119. package/dist/sprite.43.1.5x-7FOQHJZD.png +0 -0
  120. package/dist/sprite.43.1x-SVQ2YYRE.png +0 -0
  121. package/dist/sprite.43.2x-T4LGXBHT.png +0 -0
  122. package/dist/sprite.44.1.5x-ORB33HMT.png +0 -0
  123. package/dist/sprite.44.1x-26CE7BIA.png +0 -0
  124. package/dist/sprite.44.2x-WBXV5LJE.png +0 -0
  125. package/dist/sprite.45.1.5x-CM766AXL.png +0 -0
  126. package/dist/sprite.45.1x-I6HKG3TH.png +0 -0
  127. package/dist/sprite.45.2x-HTJBMJNX.png +0 -0
  128. package/dist/sprite.46.1.5x-FD6HAIAD.png +0 -0
  129. package/dist/sprite.46.1x-7CZZNAHY.png +0 -0
  130. package/dist/sprite.46.2x-RCELUTX4.png +0 -0
  131. package/dist/sprite.47.1.5x-UQEQZOLH.png +0 -0
  132. package/dist/sprite.47.1x-LZIROWHW.png +0 -0
  133. package/dist/sprite.47.2x-JHNRBS6B.png +0 -0
  134. package/dist/sprite.48.1.5x-CF4VLDQ3.png +0 -0
  135. package/dist/sprite.48.1x-37URWHJI.png +0 -0
  136. package/dist/sprite.48.2x-EO5K3WR3.png +0 -0
  137. package/dist/sprite.49.1.5x-ER2M27VD.png +0 -0
  138. package/dist/sprite.49.1x-QL2VV3AJ.png +0 -0
  139. package/dist/sprite.49.2x-U5RDSY6J.png +0 -0
  140. package/dist/sprite.5.1.5x-ME4GYDCA.png +0 -0
  141. package/dist/sprite.5.1x-W2IWAFNP.png +0 -0
  142. package/dist/sprite.5.2x-NCLJRA2R.png +0 -0
  143. package/dist/sprite.50.1.5x-S4Y55SM6.png +0 -0
  144. package/dist/sprite.50.1x-DORVBMXE.png +0 -0
  145. package/dist/sprite.50.2x-QW6UCBLZ.png +0 -0
  146. package/dist/sprite.51.1.5x-GX652CJX.png +0 -0
  147. package/dist/sprite.51.1x-7NDXNDRS.png +0 -0
  148. package/dist/sprite.51.2x-4VRCJBYW.png +0 -0
  149. package/dist/sprite.52.1.5x-ZCK4ZIRH.png +0 -0
  150. package/dist/sprite.52.1x-GHOWEHH7.png +0 -0
  151. package/dist/sprite.52.2x-6BUOP2DB.png +0 -0
  152. package/dist/sprite.53.1.5x-QYANAO2M.png +0 -0
  153. package/dist/sprite.53.1x-S5U5ZDQ2.png +0 -0
  154. package/dist/sprite.53.2x-J4WSXJEA.png +0 -0
  155. package/dist/sprite.54.1.5x-O4DSMMTX.png +0 -0
  156. package/dist/sprite.54.1x-3CA3HGGE.png +0 -0
  157. package/dist/sprite.54.2x-P7BQZS3S.png +0 -0
  158. package/dist/sprite.55.1.5x-HMGBFTI6.png +0 -0
  159. package/dist/sprite.55.1x-CT2NOYGV.png +0 -0
  160. package/dist/sprite.55.2x-GATJVZRT.png +0 -0
  161. package/dist/sprite.56.1.5x-XTQAT7P6.png +0 -0
  162. package/dist/sprite.56.1x-YBQIZY6U.png +0 -0
  163. package/dist/sprite.56.2x-7Y3HHBFF.png +0 -0
  164. package/dist/sprite.57.1.5x-EL7DF7DQ.png +0 -0
  165. package/dist/sprite.57.1x-ISDAJNBK.png +0 -0
  166. package/dist/sprite.57.2x-B3T3RWBJ.png +0 -0
  167. package/dist/sprite.58.1.5x-AB7E3NK7.png +0 -0
  168. package/dist/sprite.58.1x-5STNT7PP.png +0 -0
  169. package/dist/sprite.58.2x-3SUOF7OU.png +0 -0
  170. package/dist/sprite.59.1.5x-Q3QOSJF4.png +0 -0
  171. package/dist/sprite.59.1x-SJEVMFTL.png +0 -0
  172. package/dist/sprite.59.2x-CA2OYCYC.png +0 -0
  173. package/dist/sprite.6.1.5x-J2HZX7WZ.png +0 -0
  174. package/dist/sprite.6.1x-66ABRCF2.png +0 -0
  175. package/dist/sprite.6.2x-UELS3N4N.png +0 -0
  176. package/dist/sprite.60.1.5x-KUQO36F5.png +0 -0
  177. package/dist/sprite.60.1x-QFJ2HYZK.png +0 -0
  178. package/dist/sprite.60.2x-LZKO5ZIT.png +0 -0
  179. package/dist/sprite.61.1.5x-LN6RYWZK.png +0 -0
  180. package/dist/sprite.61.1x-EPK4BOK3.png +0 -0
  181. package/dist/sprite.61.2x-7JBPKG7R.png +0 -0
  182. package/dist/sprite.62.1.5x-7DSQK4RF.png +0 -0
  183. package/dist/sprite.62.1x-CSP67HCY.png +0 -0
  184. package/dist/sprite.62.2x-I5UD5YZC.png +0 -0
  185. package/dist/sprite.63.1.5x-5ZNCAXSC.png +0 -0
  186. package/dist/sprite.63.1x-7F4VERUU.png +0 -0
  187. package/dist/sprite.63.2x-LSCUFJAM.png +0 -0
  188. package/dist/sprite.64.1.5x-ATA5Q6LX.png +0 -0
  189. package/dist/sprite.64.1x-R2VDRSFT.png +0 -0
  190. package/dist/sprite.64.2x-YD5YI2DI.png +0 -0
  191. package/dist/sprite.65.1.5x-5O7TEWNR.png +0 -0
  192. package/dist/sprite.65.1x-V2BPH7ZR.png +0 -0
  193. package/dist/sprite.65.2x-ST7CS564.png +0 -0
  194. package/dist/sprite.66.1.5x-3KT73X5J.png +0 -0
  195. package/dist/sprite.66.1x-TK25CYYS.png +0 -0
  196. package/dist/sprite.66.2x-Q5Y23QE2.png +0 -0
  197. package/dist/sprite.67.1.5x-4CB2ACPO.png +0 -0
  198. package/dist/sprite.67.1x-AP27GV7V.png +0 -0
  199. package/dist/sprite.67.2x-OLVC2C4A.png +0 -0
  200. package/dist/sprite.68.1.5x-DRIVGXLF.png +0 -0
  201. package/dist/sprite.68.1x-YUI77IJP.png +0 -0
  202. package/dist/sprite.68.2x-QKQ6YI3Y.png +0 -0
  203. package/dist/sprite.69.1.5x-RITPHCT7.png +0 -0
  204. package/dist/sprite.69.1x-PYKOSVZM.png +0 -0
  205. package/dist/sprite.69.2x-6Y7W52SL.png +0 -0
  206. package/dist/sprite.7.1.5x-EGXDBUOU.png +0 -0
  207. package/dist/sprite.7.1x-LUXIWLZC.png +0 -0
  208. package/dist/sprite.7.2x-QXDRQFQV.png +0 -0
  209. package/dist/sprite.70.1.5x-PQQ25DCD.png +0 -0
  210. package/dist/sprite.70.1x-IMJFP6HN.png +0 -0
  211. package/dist/sprite.70.2x-UNFPYHDK.png +0 -0
  212. package/dist/sprite.71.1.5x-NEV4VFNG.png +0 -0
  213. package/dist/sprite.71.1x-QJZ3CDII.png +0 -0
  214. package/dist/sprite.71.2x-RACGFWVF.png +0 -0
  215. package/dist/sprite.8.1.5x-HNTPXNGH.png +0 -0
  216. package/dist/sprite.8.1x-X4QYD7LC.png +0 -0
  217. package/dist/sprite.8.2x-T3RXA3ZV.png +0 -0
  218. package/dist/sprite.9.1.5x-RREHIND2.png +0 -0
  219. package/dist/sprite.9.1x-7PBKZIKE.png +0 -0
  220. package/dist/sprite.9.2x-I4TPORKV.png +0 -0
  221. package/dist/src/components/FontPicker.d.ts.map +1 -1
  222. package/package.json +3 -3
  223. package/dist/sprite.1.1.5x-SDONZF54.png +0 -0
  224. package/dist/sprite.1.1x-W7PKXF3X.png +0 -0
  225. package/dist/sprite.1.2x-SNGFHAY4.png +0 -0
  226. package/dist/sprite.2.1.5x-KUC7FSCF.png +0 -0
  227. package/dist/sprite.2.1x-2A54TGMO.png +0 -0
  228. package/dist/sprite.2.2x-DENEACZO.png +0 -0
  229. package/dist/sprite.3.1.5x-BGBIVEQN.png +0 -0
  230. package/dist/sprite.3.1x-LZBPMLU4.png +0 -0
  231. package/dist/sprite.3.2x-VTCC4ZPN.png +0 -0
  232. package/dist/sprite.4.1.5x-2JDLY2JH.png +0 -0
  233. package/dist/sprite.4.1x-XRG5JZXK.png +0 -0
  234. package/dist/sprite.4.2x-KHYSECQH.png +0 -0
  235. package/dist/sprite.5.1.5x-XCGJCZLK.png +0 -0
  236. package/dist/sprite.5.1x-UBIWG32Q.png +0 -0
  237. package/dist/sprite.5.2x-JEEOEEUO.png +0 -0
  238. package/dist/sprite.6.1.5x-BMUHJ5EK.png +0 -0
  239. package/dist/sprite.6.1x-OBDYJISJ.png +0 -0
  240. package/dist/sprite.6.2x-F7BEI3S5.png +0 -0
  241. package/dist/sprite.7.1.5x-Y4DQP2JP.png +0 -0
  242. package/dist/sprite.7.1x-B3YOV2NK.png +0 -0
  243. package/dist/sprite.7.2x-K6S6WRXN.png +0 -0
package/README.md CHANGED
@@ -3,7 +3,7 @@
3
3
  A Google font picker component for React.
4
4
 
5
5
  - No dependencies (other than React)
6
- - 1330 Google fonts
6
+ - 1410+ Google fonts
7
7
  - Font previews from pre-generated images
8
8
  - Optionally autoloads fonts
9
9
 
@@ -18,16 +18,16 @@ https://ae9is.github.io/react-fontpicker/
18
18
 
19
19
  ```bash
20
20
  # npm
21
- npm i react-fontpicker
21
+ npm i react-fontpicker-ts
22
22
  # yarn
23
- yarn add react-fontpicker
23
+ yarn add react-fontpicker-ts
24
24
  ```
25
25
 
26
26
  Then, import the component and stylesheet:
27
27
 
28
28
  ```js
29
- import FontPicker from 'react-fontpicker'
30
- import 'react-fontpicker/dist/index.css'
29
+ import FontPicker from 'react-fontpicker-ts'
30
+ import 'react-fontpicker-ts/dist/index.css'
31
31
  ```
32
32
 
33
33
  # Styling
@@ -36,8 +36,88 @@ See css classnames in: [src/components/FontPicker.css](https://github.com/ae9is/
36
36
 
37
37
  # Project structure
38
38
 
39
- The live demo is a Vite app you can run yourself via `npm run dev` and which builds to /docs. Uses tsconfig.json.
39
+ The live demo is a Vite app you can run yourself via `npm run dev` and which builds to `/docs`. Uses `tsconfig.json`.
40
40
 
41
- The font picker component itself builds via tsup (i.e. esbuild) to /dist with type definitions generated according to tsconfig.types.json.
41
+ The font picker component itself builds via `tsup` (i.e. `esbuild`) to `/dist` with type definitions generated via `tsc` according to `tsconfig.types.json`.
42
42
 
43
- The font preview generation php script is currently as-is from the fork, but if re-run should build to /font-preview.
43
+ The font preview generation PHP script downloads font files to `/font-cache` and builds font image previews to `/font-preview`.
44
+
45
+ # Performance
46
+
47
+ The font picker previews work by loading font preview image files in CSS. The fonts are split across many image files for faster initial preview.
48
+
49
+ Once the dropdown select is opened, all the preview image files are retrieved enabling smooth scrolling and searching.
50
+
51
+ No requests are made to the Google fonts API unless the font picker is set to autoload, in which case the currently selected font is appended to the page header. (The previously selected font link is _not_ removed.)
52
+
53
+ For example:
54
+
55
+ ```html
56
+ <head>
57
+ ...
58
+ <link
59
+ rel="stylesheet"
60
+ id="google-font-rock_salt-all"
61
+ href="https://fonts.googleapis.com/css2?family=Rock Salt:ital,wght@0,400&amp;display=swap"
62
+ />
63
+ </head>
64
+ ```
65
+
66
+ The big trade-off of this approach is that the component's bundle is quite large due to all the font image previews (~14 MB). Only a subset of this is served depending on the client's device pixel ratio:
67
+
68
+ - 2x &rarr; 6.2 MB
69
+ - 1.5x &rarr; 4.4 MB
70
+ - 1x &rarr; 2.7 MB
71
+
72
+ For a different font picker following an on demand approach, check out: [https://github.com/samuelmeuli/font-picker-react](https://github.com/samuelmeuli/font-picker-react)
73
+
74
+ `font-picker-react` requires a Google API key, and works best at the default font limit of 50 (fonts to choose from).
75
+
76
+ # Building font previews
77
+
78
+ _Note: most users shouldn't need to rebuild the font previews, but this section is included for convenience if you need to grab the latest fonts or edit the previews._
79
+
80
+ ### 1\. Setup PHP
81
+
82
+ Setup a PHP installation with the GD image processing library. The `php-cli` package lets you run PHP scripts without needing a server.
83
+
84
+ ```bash
85
+ # Ubuntu 22.04
86
+ apt install php-cli php-gd
87
+ ```
88
+
89
+ ### 2\. Google API key
90
+
91
+ Get a Google API key here [https://developers.google.com/fonts/docs/developer_api#APIKey](https://developers.google.com/fonts/docs/developer_api#APIKey) and create a new file called `GOOGLE_API_KEY` in the same directory as the `build-font-previews.php` script.
92
+
93
+ ### 3\. Font preview script
94
+
95
+ ### All Google fonts
96
+
97
+ To generate font previews for all currently available Google fonts (latin font families only, minus `Kumar One`).
98
+
99
+ ```bash
100
+ php ./build-font-previews.php
101
+ # or npm alias:
102
+ npm run build-font-previews
103
+ ```
104
+
105
+ _Note: For 1410 fonts, budget 20-30 minutes and 700 MB to download all the fonts. Compiling the image previews themselves should be less than a minute. When re-running, the script only retrieves new font info if it's older than 1 day and skips downloading cached fonts._
106
+
107
+ ### Custom fonts
108
+
109
+ To generate font previews for custom fonts you'll need some info about the fonts and paths to the font file downloaded in TTF format.
110
+
111
+ ```bash
112
+ php build-font-previews.php "font-name|font-category|font-variants-info|font-file" "font-name-2..."
113
+ ```
114
+
115
+ Where font-variants-info is an array of values like 0,400 and 1,700 joined by +.
116
+ The first value denotes a normal (0) or italic (1) font.
117
+ The second value is the font weight (i.e. 100 = thin, 400 = normal, 700 = bold, 900 = heavy).
118
+
119
+ For example:
120
+
121
+ ```bash
122
+ php build-font-previews.php "FontName|sans-serif|0,400+0,700+1,400+1,700|/path/to/font.ttf" "Font2|serif|0,400|/path/to/font2.ttf"
123
+ ```