feat: self host api-reference fonts on scalar CDN

[tmastrom]

This PR hosts default api-reference fonts on the scalar CDN. This is currently a drop-in replacement but further optimizations can be made by removing unused alphabets and selectively fetching based on the selected language.

[changeset-bot]

🦋 Changeset detected

Latest commit: 296bb94

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 14 packages

Name	Type
@scalar/themes	Patch
@scalar/fastify-api-reference	Patch
@scalar/api-client	Patch
@scalar/api-reference	Patch
@scalar/play-button	Patch
@scalar/api-client-react	Patch
@scalar/api-reference-react	Patch
@scalar/cli	Patch
@scalar/express-api-reference	Patch
@scalar/hono-api-reference	Patch
@scalar/nestjs-api-reference	Patch
@scalar/nextjs-api-reference	Patch
@scalar/nuxt	Patch
@scalar/docusaurus	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[relativeci]

#1589 Bundle Size — 1.92MiB (+0.16%).

296bb94(current) vs 1ce9661 main#1587(baseline)

Warning

Bundle contains 4 duplicate packages – View duplicate packages

Bundle metrics   1 change 1 regression

	Current #1589	Baseline #1587
Initial JS	1.92MiB(+0.16%)	1.91MiB
Initial CSS	0B	0B
Cache Invalidation	100%	100%
Chunks	1	1
Assets	1	1
Modules	1083	1083
Duplicate Modules	0	0
Duplicate Code	0%	0%
Packages	158	158
Duplicate Packages	4	4

Bundle size by type   1 change 1 regression

	Current #1589	Baseline #1587
JS	1.92MiB (+0.16%)	1.91MiB

---

Bundle analysis report Branch tom/host-fonts-on-cdn Project dashboard

[hanspagel]

Thanks for the PR! Any chance we can make them .css files? That’s what they are, also I assume the mimetype will be fixed then (currently text/plain, should be text/css).

[hanspagel]

This looks great! Love how clean the CDN URL is now. Just one thing: Both CSS files still point to Google, for example:

https://fonts.gstatic.com/s/jetbrainsmono/v18/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTN1OVk6OThhvAWV8.woff2

We need to change this to be an URL on our CDN. We don’t want to hit the Google Fonts servers anymore and their URL with the cache hash might change and break in the future.

[tmastrom]

This looks great! Love how clean the CDN URL is now. Just one thing: Both CSS files still point to Google, for example:

https://fonts.gstatic.com/s/jetbrainsmono/v18/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTN1OVk6OThhvAWV8.woff2

We need to change this to be an URL on our CDN. We don’t want to hit the Google Fonts servers anymore and their URL with the cache hash might change and break in the future.

Good idea. We will now have our own font css files and host the .woff2 font files on the CDN. This should reduce the number of requests necessary 😄

[hanspagel]

So clean, so good. Good bye, Google Fonts! :)

re-reviewing

[hwkr]

Looks like were only hosting and setting up the regular font weight (400) so bold it just being interpolated by the browser (poorly) off of the regular font.

This branch (left) vs main (right)

I've opened a PR (#1576) against this branch to switch us to the variable width version of Inter (which we should do anyway), the CDN font files will need to be updated as well.

[hanspagel]

So great you spotted this! 🙌

[marclave]

we are missing some fonts here and weights right @cameronrohani ?

[marclave]

we are missing some weights right @cameronrohani ?

[hwkr]

we are missing some weights right @cameronrohani ?

Shouldn't be once we get the variable width font uploaded to the CDN, you'll be able to set any font weight from 100 → 900 (including in between weights like 421 or something), we only use 400, 500 and 600 in our CSS variables but this gives us the option to change in the future or for people themeing to use other font weights.

From Google:

Variable fonts—or, more specifically, OpenType Font Variations—are a relatively new font format introduced in 2016 that allow one font file to contain multiple stylistic variations, and thus break down the strict delineations of “traditional” (static) fonts. Weight, width, style, optical size, etc. can then be manipulated by the designer or adjusted based on contextual rules.
There are three main benefits offered by variable fonts:

• To compress: the unified delivery of multiple instances—such as a set of different weights—in a single font file that is much smaller than the total file size of a collection of individual font files.
• To express: the control given to users to select axes values directly, such as a custom weight that is between two named instances of weight. For example, between Regular (400) and Medium (500), a weight of 427 might be just the right one to express a design intent perfectly.
• To finesse: the control given to programs to select axes values indirectly, based on context. For example, to automatically select an optical size instance using the current point size.

[hanspagel]

I think this is ready to be merged, needs your final approvement @marclave. 🙏 Let me know if I can further help with that.

[github-actions]

Preview deployed to https://24622688-0f22-4e70-bcf3-70a87b4ca3da--scalar-deploy-preview.netlify.app

[marclave]

tested! let's go!

[marclave]

wait just thinking if we can add a flag to quickly add google fonts 🤔