Simplify Google Fonts URLs with a Universal Full Family Import Query
- Dominant language
- HTML
- Stars
- 20.5k
- Forks
- 2.9k
- Avg merge
- 1d 21h
- Merged PRs (30d)
- 95
Description
**Describe the issue**
Currently, importing variable Google Fonts dynamically requires constructing a complex and font-specific URL based on each font's available axes and their value ranges. This creates a barrier for developers who want to load fonts dynamically without diving deep into axis metadata.
**Example**
To load the full range of the Archivo font, you need a URL like -
```
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,62..125,100..900;1,62..125,100..900&display=swap');
```
But for Bricolage Grotesque, the URL differs due to different axis ranges -
```
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wdth,wght@12..96,75..100,200..800&display=swap');
```
These URLs are not uniform, making it difficult to generate them dynamically without parsing the entire axis data from the API.
**To Reproduce**
Here’s the relevant API response snippet showing different axis ranges.
Archivo -
```
"axes": [
{ "tag": "wdth", "start": 62, "end": 125 },
{ "tag": "wght", "start": 100, "end": 900 }
]
```
Bricolage Grotesque -
```
"axes": [
{ "tag": "opsz", "start": 12, "end": 96 },
{ "tag": "wdth", "start": 75, "end": 100 },
{ "tag": "wght", "start": 200, "end": 800 }
]
```
**Expected behavior**
Provide a universal way to fetch the full available axis range of a font family without requiring font-specific manual construction.
Enable a query like this
```
@import url('https://fonts.googleapis.com/css2?family=Archivo&full&display=swap');
```
Where `&full` (or something similar) automatically fetches entire font family.
**Additional context**
From a developer experience standpoint, this would -
- Greatly simplify dynamic font imports.
- Enable easier implementation of Google Fonts pickers.
- Eliminate the need to manually parse and map axes metadata.
- Reduce chances of errors in axis range specification.
For instance, a font picker component could let users choose any font and load it via a consistent URL pattern, instead of needing to build axis-specific queries per font selection.
Contributor guide
Assessment
This issue has not been assessed yet.