Use system font #642
Use system font #642
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
📦 Next.js Bundle AnalysisThis analysis was generated by the next.js bundle analysis action 🤖
|
| Page | Size (compressed) |
|---|---|
global |
351.15 KB (🟡 +3 B) |
Details
The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!
Eight Pages Changed Size
The following pages changed size from the code in this PR compared to its base branch:
| Page | Size (compressed) | First Load |
|---|---|---|
/CommunityNext |
6.08 KB (🟢 -2 B) |
357.24 KB |
/Parts |
47.63 KB (🟢 -26 B) |
398.79 KB |
/Parts/[...deviceHandleItemType] |
47.66 KB (🟢 -26 B) |
398.81 KB |
/Shop/[handle] |
47.64 KB (🟢 -26 B) |
398.79 KB |
/Tools |
47.63 KB (🟢 -26 B) |
398.79 KB |
/Tools/[handle] |
47.64 KB (🟢 -26 B) |
398.79 KB |
/products/[handle] |
75.42 KB (🟢 -44 B) |
426.57 KB |
/store |
10.54 KB (🟢 -18 B) |
361.69 KB |
Details
Only the gzipped size is provided here based on an expert tip.
First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this.
This is what we are now using on the rest of ifixit.com. We can adjust the core primitives stack later if we want to tweak it.
davidrans
force-pushed
the
use-system-font
branch
from
37cf77d to
db04716
Compare
QA 😺 |
masonmcelvain
left a comment
masonmcelvain
left a comment
There was a problem hiding this comment.
CR ✌🏻 but deploy_block ✌🏻 on a question
frontend/pages/_document.tsx
Outdated
| href="https://fonts.gstatic.com" | ||
| crossOrigin="anonymous" | ||
| /> |
There was a problem hiding this comment.
Do we still want to preconnect to the google font api?
There was a problem hiding this comment.
This too was added last month or so. So yep a little cleanup is needed.
| as="h1" | ||
| className={className} | ||
| size="xl" | ||
| fontFamily="Archivo Black" |
There was a problem hiding this comment.
I think this branch may be out of date- there are more than 3 references to fontFamily="Archivo Black" on main.
There was a problem hiding this comment.
Yep, Probably a couple more reference got created in the meantime
I'll sort this out tomorrow morning
Conflicts: frontend/package.json frontend/tests/jest/tests/__snapshots__/ProductListItem.test.tsx.snap pnpm-lock.yaml
|
CR ✌🏻 merge conflicts were pretty straightforward |
|
Fonts continuing to work and not break anything else. QA 😺 |
|
un_deploy_block ✌🏻 |
Closes #566
Apart from enriching the changes introduced with #626 we are proposing to add a bit of specificity to the system font stack currently defined in core primitives.
This PR is still a draft because we want to test that the proposed variation are ok on most devices/OS.
References
QA
Is anything broken with the new fonts?