Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/randombits-dev/font-previews
Contains font preview images for Google Fonts, for use in Font Pickers
https://github.com/randombits-dev/font-previews
font-picker fonts generator google-fonts preview
Last synced: 2 months ago
JSON representation
Contains font preview images for Google Fonts, for use in Font Pickers
- Host: GitHub
- URL: https://github.com/randombits-dev/font-previews
- Owner: randombits-dev
- License: mit
- Created: 2024-02-04T03:32:02.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2024-07-01T04:34:25.000Z (7 months ago)
- Last Synced: 2024-10-31T17:36:00.811Z (3 months ago)
- Topics: font-picker, fonts, generator, google-fonts, preview
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/font-previews
- Size: 5.54 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Font Previews
Preview images of Google Fonts, for use in font pickers, etc.
## Output Files
The `output/google-fonts.json` file contains metadata for the normal style/weight of all the fonts:
```json
{
"name": "ABeeZee",
"category": "Sans Serif",
"popularity": 175,
"trending": 657,
"dateAdded": "2012-09-30",
"img": "abeezee-normal-400.webp",
"base64": "UklGRqQCAABXRUJQ..."
}
```
The `output/google-fonts-all-styles.json` file contains metadata for every style/weight of every font:
```json
{
"name": "ABeeZee",
"category": "Sans Serif",
"popularity": 175,
"trending": 657,
"dateAdded": "2012-09-30",
"styles": [
{
"img": "abeezee-normal-400.webp",
"type": "normal",
"weight": 400,
"img": "abeezee-normal-400.webp",
"base64": "UklGRqQCAABXRUJQ..."
},
{
"img": "abeezee-italic-400.webp",
"type": "italic",
"weight": 400,
"base64": "UklGRqQCAABXRUJQ..."
}
]
}
```
Each font references the `webp` image name, and also includes the `base64` encoded image data.
## How the images were generated
1. The entire Google Font data was downloaded from [here](https://github.com/google/fonts).
2. The METADATA.pb files for each font was parsed.
3. Using puppeteer, an HTML page was rendered for each font, displaying the font name in that font. The HTML page was then captured as a screenshot.
4. The screenshot was saved as both a webp image and a base64 encoded string.
5. The font list was written to a JSON file, which included the base64 encoded image data, and references the name of the webp image.
## How to use the data
It is recommended that you filter and/or condense the data to reduce the file size. For example, you will want to choose to either the webp or base64 image data, and remove the other. You probably also want to remove the extra metadata that is not needed for your use case.
You can create a nodejs script in your project that imports the data, and modifies it:
```javascript
import fontList from 'font-previews/output/google-fonts.json' assert {type: 'json'};
import fs from 'node:fs';
// sort by popularity
const sorted = fontList.sort((a, b) => {
return a.popularity - b.popularity;
});
// only include data we need
const newData = sorted.map(font => {
return [
font.name,
font.category,
font.base64
];
});
fs.writeFileSync('newData.json', JSON.stringify(newData));
```