[polaris.shopify.com] Inter needs to be loaded as a variable weight font #10894
Assignees
Comments
5 tasks
5 tasks
tjonx
added a commit
that referenced
this issue
Oct 5, 2023
<!-- ☝️How to write a good PR title: - Prefix it with [ComponentName] (if applicable), for example: [Button] - Start with a verb, for example: Add, Delete, Improve, Fix… - Give as much context as necessary and as little as possible - Prefix it with [WIP] while it’s a work in progress --> ### WHY are these changes introduced? Fixes #10894 <!-- Context about the problem that’s being addressed. --> ### WHAT is this pull request doing? Load the correct font weights for regular ~`400`~ `450` and semibold ~`600`~ `650` tokens. Updates migration guide and any other documentation (like the readme) where the Inter font load string is present to include the correct weights, and removes unnecessary weights (`100`, `200`, `300` and `800`, `900`) Before:  After:  ### 🎩 checklist - [ ] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [ ] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers) - [ ] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [ ] Updated the component's `README.md` with documentation changes - [ ] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide
mrcthms
pushed a commit
that referenced
this issue
Oct 12, 2023
<!-- ☝️How to write a good PR title: - Prefix it with [ComponentName] (if applicable), for example: [Button] - Start with a verb, for example: Add, Delete, Improve, Fix… - Give as much context as necessary and as little as possible - Prefix it with [WIP] while it’s a work in progress --> ### WHY are these changes introduced? Fixes #10894 <!-- Context about the problem that’s being addressed. --> ### WHAT is this pull request doing? Load the correct font weights for regular ~`400`~ `450` and semibold ~`600`~ `650` tokens. Updates migration guide and any other documentation (like the readme) where the Inter font load string is present to include the correct weights, and removes unnecessary weights (`100`, `200`, `300` and `800`, `900`) Before:  After:  ### 🎩 checklist - [ ] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [ ] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers) - [ ] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [ ] Updated the component's `README.md` with documentation changes - [ ] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide
mrcthms
pushed a commit
that referenced
this issue
Oct 12, 2023
<!-- ☝️How to write a good PR title: - Prefix it with [ComponentName] (if applicable), for example: [Button] - Start with a verb, for example: Add, Delete, Improve, Fix… - Give as much context as necessary and as little as possible - Prefix it with [WIP] while it’s a work in progress --> ### WHY are these changes introduced? Fixes #10894 <!-- Context about the problem that’s being addressed. --> ### WHAT is this pull request doing? Load the correct font weights for regular ~`400`~ `450` and semibold ~`600`~ `650` tokens. Updates migration guide and any other documentation (like the readme) where the Inter font load string is present to include the correct weights, and removes unnecessary weights (`100`, `200`, `300` and `800`, `900`) Before:  After:  ### 🎩 checklist - [ ] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [ ] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers) - [ ] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [ ] Updated the component's `README.md` with documentation changes - [ ] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide
|
Hi! I am not sure if the root cause is Polaris or Chrome, but on Chrome Canary, I am experiencing a much bolder style for buttons, headings... Chrome stable: 
Chrome canary: 
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Issue summary / Current behavior
On staging, regular and semibold fonts are bolder than they should be. This looks like the font we load (Inter) is being loaded per weight and not as a variable weight font.
<style data-href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">Our Regular font weight was changed from
400to450, but it gets rounded up to500because we're not loading the variable weight version of Inter.Screen.Recording.2023-10-05.at.10.18.21.AM.mov
Same thing happens (less noticeably because it's used less) with Semibold, which went from
600to650, but is getting rounded up to700.Expected behavior
The font needs to be loaded as a variable weight font:
<style data-href="https://fonts.googleapis.com/css2?family=Inter:wght@400..700&display=swap">or load the new weights for regular and semibold instead:
<style data-href="https://fonts.googleapis.com/css2?family=Inter:wght@450;500;650;700&display=swap">The text was updated successfully, but these errors were encountered: