Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update Inter font and set display: swap #2000

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

zecakeh
Copy link
Contributor

@zecakeh zecakeh commented Nov 16, 2024

The main goal here was to set display: swap for Inter. It means that the browser will render the text of the spec even before Inter is loaded, making the website appear to load faster on mobile.

I noticed that the Google Fonts API has a setting for that, and that it serves the variable font by default, which means that a single file is used for all the font weights, so I updated the script to load the fonts and updated the files. Variable fonts are supported widely in modern browsers.

Pull Request Checklist

Preview: https://pr2000--matrix-spec-previews.netlify.app

The version of Inter is updated to use a variable font, which is supported wudely among modern browsers.

Using `display: swap` means that the browser will render the text of the spec even before Inter is loaded, making the website appear to load faster on mobile.

Signed-off-by: Kévin Commaille <[email protected]>
@zecakeh zecakeh requested a review from a team as a code owner November 16, 2024 18:06
Signed-off-by: Kévin Commaille <[email protected]>
font-weight: 100 900;
font-display: swap;
src: local('Inter'), url(../../fonts/Inter-latin-ext-normal.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Another improvement that we could add to this PR is that we really only need the "latin" character set given that the spec is written in english, so we could serve only this font file and render the CSS inline since it would now be a single block. The only catch is that if we ever start to include characters out of that set, we need to remember to add extra font files, but I don't know if that's likely to happen.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant