[FEATURE] Nunito Default Font #2471
Conversation
src/theme/_fonts.scss
Outdated
| @@ -3,6 +3,17 @@ | |||
| --ion-font-family: "Roboto", "Helvetica Neue", sans-serif; | |||
| } | |||
|
|
|||
| // Override roboto font | |||
| :root { | |||
| --ion-font-family: "Nunito", sans-serif; | |||
There was a problem hiding this comment.
nit (blocking): It would be good to move this (and the @font-face declaration below) to the plh_kids_kw theme file. Whilst we may well want to incorporate these changes into the default styles, if we keep them scoped to the plh_kids_kw theme for now then we avoid making changes to our existing production apps, and we can decide if/when to roll out the changes independently.
Ideally, it would be good to be able to expose a new variable for $font-name (alongside $color-primary, $color-secondary and $page-background that already exist at the top of the theme files), and infer all the necessary changes from that. However I think that could be tricky as we'd need to account for different font types (we already have .ttf and .woff2 to handle).
So I think for now it might make sense to do the following:
- Move the whole
@font-facedeclaration block as it is into the theme file (i.e. under line 10 ofsrc/theme/themes/plh_kids_kw.scss) - Move this variable assignment to the theme file
- Adding
ion-font-family: "Nunito", sans-serif,to the list of$variable-overridesshould work I think – the--gets added automatically
- Adding
Let me know if that doesn't make sense
There was a problem hiding this comment.
@jfmcquade The scoping of changes does make sense. Given that the font change was required globally, it made sense for me to have that in the variables file but I do understand how that makes deployment somewhat complicated.
I'll work on keeping changes within the theme file.
|
Just to quickly add, given all apps run within a (reasonably) modern version of webkit/chrome to run I think we should be able to reliably use Woff files tend to be a lot smaller (~10x for nunito), so would be good to use so that overall we only add a couple hundred kb to the project instead of the current 2-3MB included in this PR Annoyingly google fonts don't offer woff2 files directly, but you can find most fonts at: Alternatively you can convert using: I would also recommend matching the current font-weights (400 standard, 700 bold), with italic variant on 400 also. I can't see any other font variants defined in the |
|
@chrismclarke Yeah I did download the Nunito font files from the Google library which was the |
|
For review @jfmcquade. Style changes kept to theme file Default Theme: Roboto Font Kuwait Theme: Nunito Font |
There was a problem hiding this comment.
Thanks for making the updates @FaithDaka
Yeah google fonts changed a while back to start using variable fonts, which can give a lot more flexibility to customise fonts, but result in much larger font files. These work well if serving the font from a cdn and only downloading on demand the exact styles needed (and also nice to install on your computer and use locally), but not very well suited for serving offline.
Given that any fonts needed in the app will have to be bundled into the build, using woff2 files just for the specific weights we're likely to need is the best option - I can see each of the ones you included are only around 15kb compared to 160kb for the previous ttfs
PR Checklist
Description
Refactors the default font from Roboto to Nunito, with the font files added to 'assets/fonts'. Also includes colour changes to the plh_kids_kw theme
Git Issues
Closes #2470
Screenshots/Videos