[#40124] - [5.0] Cassiopeia Fontstacks
- Fixed in Code Base
- 15 Jun 2023
- Medium
- Build: 4.3-dev
- # 40124
- Diff
- brianteeman:fontstack
User tests: Successful: Unsuccessful:
Currently cassiopeia offers three font configuration settings all with their limitations
- none - boring generic system font
- Roboto Local - slow
- Google Fonts - privacy
Using a system font stack is always the best. It is fast, there is nothing to download, there is no layout shift (google pagespeed hates that).
The problem with a system font stack is that every system has different fonts available so you need to be careful in defining it. Thats why the current system font stack from Bootstrap that is used in Cassiopeia is so boring and safe and why people choose google fonts etc.
This PR adds 14 modern system font stacks from @danklammer
System font stack CSS organized by typeface classification for every modern OS
The fastest fonts available. No downloading, no layout shifts, no flashes — just instant renders.
You can see them in action at https://modernfontstacks.com/ and helpfully see which font in each stack your own system will use.
This was developed for my own sites and I am offering it here as I am certain that it will be useful to all. Especially to those people who don't realise they can have great font choices with Joomla without impacting privacy or performance.
The base branch for this PR is 4.3 simply because that's what is developed on. I leave it to maintainers to decide if and when it can be merged.
It is fully backwards compatible
I created language strings for each font stack but I suspect that most translation teams will chose not to translate them.
Testing Instructions
In the template style options for Cassiopeia there is now an additional option in the Fonts Scheme select
Once the System Fonts option is selected there are two new lists available to chose both a body font stack and a heading font stack. There is also an additional line added to the Notes
Once you have selected your stack and saved the style you can test it on the front end.
Viewing the source you should now see
Inspecting the css you should see
Link to documentations
If/when accepted I will update the docs - who knows which site it will be on by then
Please select:
-
Documentation link for docs.joomla.org:
-
No documentation changes for docs.joomla.org needed
-
Pull Request link for manual.joomla.org:
-
No documentation changes for manual.joomla.org needed
Votes
joomla-cms-bot
- | Category | ⇒ | Language & Strings Front End Templates (site) |
| Status | New | ⇒ | Pending |
Can we remove remote fonts? there are zero benefits.
Beyond the scope of this PR and also a disruptive b/c break
| Title |
|
||||||
| Labels |
Added:
Language Change
PR-4.3-dev
|
||
That's quite interesting. Most of my customers want and need specific fonts, but this would be useful for small association and NGO websites and that are those who mostly would use Cassiopeia I guess.
Not really sure why you commented @coolcat-creations as this is clearly nothing to do with any template other than cassiopeia or offering specific conts (though I doubt they do really need a specific font). Not everyone has the money to spend on a custom designed template or on a closed platform like yootheme.
I think my comment was lost in translation because I don't understand your answer :-)
Let me rephrase:
That suggestion is very interesting. I do not have a lot of customers that would use system fonts even if they use Cassiopeia. Most of them want and need specific fonts. I think this suggestion would be useful for small association and NGO websites where the font does not matter so much. And I think such organizations are most likely those who would use Cassiopeia, the template you suggested it for.
I hope my comment makes more sense now ??♀️
@brianteeman Am I blind so I am missing it, or have you not implemented the system-ui font stack?
@brianteeman Am I blind so I am missing it, or have you not implemented the system-ui font stack?
I was wondering who would ask that first
Bootstrap already has a system font stack defined
This PR (like the other font options) adds the selected font stack (as a variable --cassiopeia-font-family) to the existing boostrap system stack (--body-font-family). So there was no need to add a value for system-ui as it would result in a duplicated stack.
I could also have included it as an option in this select list with a blank value - would that be less confusing?
Bootstrap already has a system font stack defined
@brianteeman Do you mean this one here? https://github.com/joomla/joomla-cms/blob/4.3-dev/build/media_source/templates/site/cassiopeia/scss/tools/variables/_variables.scss#L161
That's not really the same as the font-family: system-ui, sans-serif; from the system-ui font stack, that's why I had asked.
Another thing: Do you think it could make sense to add emoji support like described here? https://github.com/system-fonts/modern-font-stacks#emoji-support
@brianteeman P.S.: Hmm, reading here I think you are right and the result is (nearly) the same: https://css-tricks.com/snippets/css/system-font-stack/ . So you might be right and it does not need the "system-ui" font stack.
I would be very pleased to have this available in the Cassiopeia template and not rely on external fonts. Thanks Brian , lets hope it is accepted soon.
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/40124.
I would be very pleased to have this available in the Cassiopeia template and not rely on external fonts. Thanks Brian , lets hope it is accepted soon.
@gwstyles It needs 2 successful human tests, then it will be considered, and I don't see any reason not to accept it. So if you want to help with it coming forward, test it and report back your test result using the "Text this" button in the issue tracker https://issues.joomla.org/tracker/joomla-cms/40124 . You can download an installation package for testing on a testing environment here: https://ci.joomla.org/artifacts/joomla/joomla-cms/4.3-dev/40124/downloads/63203/ .
I have tried to install https://ci.joomla.org/artifacts/joomla/joomla-cms/4.3-dev/40124/downloads/63203/ . On wampserver and on my live server and it will not install...
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/40124.
I have tested this item
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/40124.
I have tested this item
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/40124.
| Status | Pending | ⇒ | Ready to Commit |
RTC
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/40124.
This pull request has been automatically rebased to 5.0-dev. No new features will be merged into Joomla! 4.3 series. Joomla! 4.4 series is a bridge release to make migration from Joomla! 4 to 5 as smooth as possible.
| Title |
|
||||||
| Labels |
Added:
Feature
?
Documentation Required
PR-5.0-dev
Removed: PR-4.3-dev |
||
| Status | Ready to Commit | ⇒ | Fixed in Code Base |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2023-06-15 07:09:53 |
| Closed_By | ⇒ | HLeithner |
thanks
thanks
Docs joomla/Manual#141
Can we remove remote fonts? there are zero benefits.