-
Notifications
You must be signed in to change notification settings - Fork 130
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
feat(styles): load custom fonts #603
Conversation
feature/load-fonts
feature/load-fonts
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/sumup-oss/circuit-ui/oqco64795 |
Codecov Report
@@ Coverage Diff @@
## alpha #603 +/- ##
==========================================
+ Coverage 94.22% 94.24% +0.01%
==========================================
Files 137 137
Lines 2183 2190 +7
Branches 622 622
==========================================
+ Hits 2057 2064 +7
Misses 103 103
Partials 23 23
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🥇
🎉 This PR is included in version 2.0.0-alpha.21 🎉 The release is available on: Your semantic-release bot 📦🚀 |
🎉 This PR is included in version 2.0.0-beta.1 🎉 The release is available on: Your semantic-release bot 📦🚀 |
🎉 This PR is included in version 2.0.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Purpose
When we started Circuit UI 2 years ago, I researched different font loading techniques. We decided to leave the font loading to the applications to give them the flexibility to control the loading behavior (FOIT vs FOUT etc). The ideal approach requires
<link />
tags in the<head />
, the API to inject those depends on the application (SSR and all). So we just documented it in Storybook.Nowadays, the
font-display
CSS property has decent browser support, so we can standardize it and automatically load the fonts.Approach and changes
font-face
declarations to BaseStylesDefinition of done