-
Notifications
You must be signed in to change notification settings - Fork 12
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
Add fontfaces and the use-font-face-observer hook #297
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
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.
Mostly looking good, and nice to have extensibility for loading fonts
有個小問題想確認:
1. 如果Noto Sans TC載入失敗, 是不是字型顯示就會轉為browser default?
Nice Catch! 04a9e21 address this issue. |
@taylrj 感謝解答 另外想請問一個問題,就是為什麼self host font載入是選擇用fontfaceobserver-es這個loader而不是直接用 ref: https://web.dev/preload-optional-fonts/ 主要想法是參考Martin Fowler的Evolutionary Design(開發時組件的功能如果有用到再加入),上面這些eslint的warning, 尚未使用到的state preload解決的是FOIT, fontfaceobserver-es利用觀察fontface(font-display: swap)來執行callback換css,解決FOUT |
After the discussion, a patch will be added to twreporter/twreporter-react#2216 for preloading the self hosted font files. |
Updated. |
LGTM, great integration of self-host fonts, thanks! |
This change adds get-fontfaces utility function to get the fontfaces by font-family and font-weight specified in @twreporter/core.
This change adds `fontobserver-es` npm module monitor when a webfont is loaded and notify. Please note that it is different from `fontfaceobserver` module, we choose `fontobserver-es` because it's an es module. ref: - bramstein/fontfaceobserver#118 - https://github.com/dmnsgn/fontfaceobserver
This change adds the `use-font-face-observer` react hook which utilize fontfaceobserver and returns whether the specified fonts are loaded then run callback.
This change removes font-family related css setting in article-page component and let it inherit the default font-family from `@twreporter/core` setting directly from `html`. The reason to this change would be lately add classname to html after fonts are loaded to prevent FOUT(Flash of Unstyled Text) word by word.
This patch changes the font files from otf to woff2 format to optimize font file size.
Address TWREPORTER-318