#86 Self host Google Fonts and Material Symbols #91
Conversation
|
Resolves #86 |
src/cdn/settings/urls.css
Outdated
| @@ -1 +0,0 @@ | |||
| @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&family=Roboto:wght@300;400;500&display=swap"); | |||
There was a problem hiding this comment.
What about the gone display: swap property?
There was a problem hiding this comment.
The Roboto Font related @import declarations in beer.css bring in the following css files:
node_modules/@fontsource/roboto/400.cssnode_modules/@fontsource/roboto/500.css
Both of them have font-display: swap for all of the @font-face declarations. So we are good there.
For the material symbols, the file being brought in seems to be the following:
node_modules/material-symbols/index.css
This file uses font-display: block in its @font-face declarations which seems to be the default value of font-display.
I believe we do not want to use swap for symbols because there is no fallback font for them. If font-display: swap is used, then while the material symbols font file loads, the end-user will see un-ligatured text.
Thoughts?
There was a problem hiding this comment.
I’m not the repo owner, I cannot tell if these import changes go into the direction decided for beercss. So I will let @leonardorafael answer 😉
…oogle_font_compliance
…ogle_font_compliance
With this PR, Roboto font files and Material Symbols woff2 files will be loaded using relative urls to the location of beer.min.css file instead of relying on the Google hosted version as default behavior.