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: 6 months 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 3 years ago)
• Default Branch: main
• Last Pushed: 2025-01-25T15:02:12.000Z (9 months ago)
• Last Synced: 2025-01-25T16:17:57.782Z (9 months ago)
• Topics: self-host, variable-font, woff2
• Language: TypeScript
• Homepage: https://variable-font-helper.web.app
• Size: 654 KB
• Stars: 7
• 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`

### Deploy