https://github.com/aarol/variable-font-helper

Self host variable fonts from Google Fonts
https://github.com/aarol/variable-font-helper

self-host variable-font woff2

Last synced: 8 days ago
JSON representation

Self host variable fonts from Google Fonts

• Host: GitHub
• URL: https://github.com/aarol/variable-font-helper
• Owner: aarol
• License: mit
• Created: 2022-09-25T19:37:10.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2023-10-15T12:05:50.000Z (about 1 year ago)
• Last Synced: 2024-08-02T15:47:08.820Z (3 months ago)
• Topics: self-host, variable-font, woff2
• Language: TypeScript
• Homepage: https://variable-font-helper.web.app
• Size: 532 KB
• Stars: 2
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Variable fonts helper

### Self host variable fonts from Google Fonts

![Screenshot of the variable font helper web app](screenshot.png)

### 

![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/aarol/variable-font-helper/test.yml?label=Tests)

## Stack:

* React

* [Mantine UI](https://mantine.dev)

* Firebase Cloud Functions

* Firebase Hosting

## How it works

1. Client will make a request to  which will execute a Firebase Cloud Function.

2. The Cloud Function will make a request to , filter the output and cache the response for 1 day.

3. When `Generate Output` is pressed, the client will send a request to the [Google Fonts CSS2 API](https://developers.google.com/fonts/docs/css2#api_url_specification) and extract the font url and stylesheet from each subset using a regexp.

4. Clicking `Download All` will `fetch` all selected subsets and turn them into a zip archive using [jsZip](https://www.npmjs.com/package/jszip) in-browser.

## Run locally

1. Install firebase-tools

`pnpm add -g firebase-tools`

2. Run the client & functions locally

`pnpm --recursive dev`