Update Inter font and set display: swap
#2000
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 <zecakeh@tedomum.fr>
Signed-off-by: Kévin Commaille <zecakeh@tedomum.fr>
Signed-off-by: Kévin Commaille <zecakeh@tedomum.fr>
zecakeh
commented
Nov 16, 2024
| 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 */ |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
I don't think I have a strong feeling here. I don't think the extra CSS adds significantly to the render time.
43 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
The main goal here was to set
display: swapfor 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