fix: design: sets Trebuchet as default font for all USWDS components #971
Conversation
|
This pull request has been linked to Shortcut Story #1805: Change USWDS theme settings to not use Public Sans. |
|
looks like browsers that are not edge in happo arent showing trebuchet (even tho they do locally). will take a look tomorrow |
|
well, that's not working, going to try to find a different way. |
shkeating
force-pushed
the
sc-1805-fonts-in-use
branch
from
693a5f5 to
5c1a349
Compare
| @@ -43,7 +43,8 @@ | |||
| box-sizing: border-box; | |||
| border-radius: 4px; | |||
| margin-top: 0; | |||
| font-family: 'Trebuchet MS'; | |||
| font-family: 'Trebuchet MS', Lucida Grande, Lucida Sans Unicode, Lucida Sans, | |||
There was a problem hiding this comment.
Question: just for my understanding this uses Trebuchet from the user's system because we didn't specify a full path like we do in the storybook files, correct?
There was a problem hiding this comment.
Most computers have trebuchet on them, but it's still a good practice to provide a font stack. In our css modules it will work for both cases. In storybook I loaded in a web font version of trebuchet because happo needs it. If I didn't obtain woff files for it, it would still look right if we run the app or storybook locally, because trebuchet is pre installed on pretty much all Mac and windows computers
The only case where the web fonts are needed is happo. I'm not so pressed about performance and asset loading on storybook as I am with the app itself. I made sure this does not cause the trebuchet files are not loaded in the portal.
…ames for trebuchet font files in preview.html for storybook
SC-1805
Proposed changes
This branch removes Public Sans and ensures that we instead use Trebuchet MS, the system font as our defualt in all components. Hoping this leads to some gains in performance, as we will no longer be loading additional font file assets in our build aside from Sharp Sans.
Also edits our font loading stack to select more similar system fonts to fall back on in the event a user does not have trebuchet
Removes quotes from trebuchet font name, it's uneeded since its a system font
Reviewer notes
This affects almost all USWDS components, we should see a lot of Happo changes.
Some examples:
.usa-link,.usa-button,sidenavExamples of altered components in light mode myspace in screenshots
Setup
Screenshots