google / google/fonts

Simplify Google Fonts URLs with a Universal Full Family Import Query

Open
#9,454 0 comments 0 reactions 0 assignees View on GitHub
I API / Website / Platform I Request I Tools / workflow / repo I UX/UI Suggestion
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.