[WiP] Google Fonts - Generalise option name, clean-up fonts folder and simplify UX by richard67 · Pull Request #50 · joomla/cassiopeia

richard67 · 2020-08-30T15:57:44Z

Pull Request for Issue #32 .

Summary of Changes

Move the woff and woff2 files to sub-folders, but not the (s)css files, so several (s)css files can share fonts of one or more su-folders.
More general name of the option, i.e. not use "Google", because fonts could be downloaded and used from any provider, as long as woff and woff2 files are available, and the css could use either one font or a combination of fonts for diverse heading levels and body text.
Simplify UX: Only one list field for controlling the use of extra fonts, i.e. no need to first click on "Yes" and then select the font, it can be done in one step with a font, and select "None" to switch it off again.
Remove the description from the remaining field.
Use a list field and not a filelist field in order to be able to set nice names for the fonts or font combinations. The names don't need to be translated as far as I can see up to now.

Testing Instructions

Checkout the development branch in your Cassipeia local git clone and if necessary pull the latest changes.
If never done before:

Run composer install and npm ci.
Install Blog Sample data.

Alternatively to steps 1 and 2 you can make a new installation, using the installation package from the testing PR #48 , https://test5.richard-fath.de/Joomla_4.0.0-beta4-dev-Cassiopeia-Test-Full_Package_2020-08-30_v2.zip , and installing blog sample data.

Check content of the media/fonts folder.
Result: See 1st screenshot in section "Actual result" below.
In backend, check the "Advanced" options of the Cassiopeia template style.
Result: See 2nd screenshot in section "Actual result" below.
Apply the changes of this PR.
Run npm ci.

Alternatively to steps 5 and 6, you can update the installation using the "Upload & Update" tab of the "Joomla Upda" component and using using the installation package from the testing PR #48 : https://test5.richard-fath.de/Joomla_4.0.0-beta4-dev-Cassiopeia-Test-Update_Package_2020-08-30_v2.zip.

Check content of the media/fonts folder.
Result: See 1st screenshot in section "Expected result" below.
In backend, check the "Advanced" options of the Cassiopeia template style.
Result: See 2nd screenshot in section "Expected result" below.
Toggle the "Extra font(s) ..." dropdown, save settings and check the result in frontend visually and using your browser's inspection tool.
Result: The font selection is applied as well as without this PR.

Expected result

The media/fonts folder:
Cassiopeia's template style options:

Actual result

The media/fonts folder:
Cassiopeia's template style options:

Documentation Changes Required

None beside what has to be done for the new option anyway.

- More general name of the option, i.e. not use "Google". - Simplify UX: Only one field for controlling the use of extra fonts. - Remove the description. - Use a list field and not a filelist in order to be able to set nice font names.

brianteeman · 2020-08-30T17:36:48Z

language/en-GB/tpl_cassiopeia.ini

-TPL_CASSIOPEIA_FONT_NAME_LABEL="Google Font Name"
-TPL_CASSIOPEIA_FONT_NAME_DESC="Example: only one font Josefin Sans or a font combination Montserrat + Work Sans."
-
+TPL_CASSIOPEIA_FONT_LABEL="Extra font(s) for text and headings"


What else could a font be for?

@brianteeman

Ok, I'll remove the " for text and headings".

Is the "Extra font(s)" ok? Or should it be somethine else, e.g. "Load font(s)" or "Add font(s)"? And is the "(s)" ok for showing it could be a font or a combination of fonts, depending on the particular (s)css file?

To match the style guide it should be capital F

It is not very accessible to a screen reader to have (s)

Is it a multiple select?

Needs to be clear that this will be for fonts that are not part of a users system. ie they will be downloaded over the internet by every user. Personally I would never use this as it will effect the performance of the site

@brianteeman Capitalisation "Font(s)" already fixed.

It is a single select, but it selects a css file. This can use one font for all, or a conbination of fonts, e.g. font x for h1, h2 ... h6 and font y for body, or however you define it there.

Correct but maybe too long would be "Extra Font or Font Combination". Shall I use that?

And should we translate the font or font combination names, too? In most languages I've ever seen, e.g. Russian or Japanese, such names are (or at least can be) treated as literals with latin characters. But you have more experience in web, so maybe my experience is wrong because too limited.

So you won't at least suggest a better label text or tell me "Extra Font or Font Combination" is ok?

Its not possible to suggest something because its not clear what the feature does

Extra Font means extra to what
Font combination doesn't indicate that it will be using font files that have a negative impact on my sites performance

Check the code and test the PR and you will see what the feaure does.

I can see what it does - I cant see what it is intended to do

Well I think that was explained before: We want to provide a possibility to use locally stored fronts for those who don't wanna load them from Google fonts for whatever reason, GDPR or whatever else.

It was requested to have that possibility, and it was on the task list for that Cassiopeia working group before I joined it.

If that makes sense or not I don't really want to decide. It was not my idea, I only wanted to help with implementation.

Because the was using a CSS file to load the fonts we can do more than just load one font, and so we can select one CSS file which uses several fonts. Currtently the examples here don't do that.

I wanted to keep this work piece separate so we could later still decide to use it or not, but development here was going the way that it was merged into the development branch.

So later it might be harder to revert that part, but it will still be possible, and I would be the last one who would fight against reverting if it was clear that the feature is not accepted by the majority or even a large part of the community.

You are right regarding performance of loading those fonts from the site. Maybe we should mention that in docs, if that fautre is accepted, or even show a kind of warning text in the template style settings.

brianteeman · 2020-08-30T18:46:56Z

Having checked the Fira font it definitely can not be transliterated or translated as that would be a breach of the trademark

brianteeman · 2020-08-30T18:52:12Z

I am assuming that no one has realised that neither of these fonts will work in non-latin character sets

richard67 · 2020-08-30T18:53:25Z

We have realized that and are looking for better ones.

brianteeman · 2020-08-30T19:03:39Z

Good luck in that as to the best of my knowledge there is no google font that ships with all character sets. Which is why joomla has never shipped with one before as out of the box joomla really should work perfectly with all supported languages. It's not "all together" if some languages are excluded.

The only one that really does is the noto font and it does this by having separate fonts for each character set or having a single 20mb font file

richard67 · 2020-08-30T19:08:50Z

Well with the solution here, one can use different template styles for particular languages and in that template style select a CSS for a font (or font combination) which is suitable for that language and regarding design aspects looks similar to the fonts used for e.g. for English.

brianteeman · 2020-08-30T19:11:48Z

Out of the box on install?

richard67 · 2020-08-30T19:16:20Z

If we find suitable fonts for Arabic, Greece, Hebrew, Russian, ... we could ship them with the core and give them telling names in the options so people can see they are good for e.g. Greece, and maybe we could provide a readme in the media/fonts folder where we have the fonts.

brianteeman · 2020-08-30T19:19:17Z

you miss the point.
if you install joomla in arabic will you see text or little tofu squares when you visit the frontend of the site for the very first time.
If you add russian to your site will you then have to know to go and create a new template style with a new font selection

a readme in the font folder will be too late and its not available to users from inside the joomla ui

richard67 · 2020-08-30T19:25:16Z

I did not miss the point and it is true what you write.

But currently in J4 core the Cassipeia template uses the "Fira Sans" font anyway, without even a possibility to change that or switching it off without making an override.

templates/cassiopeia/templateDetails.xml

richard67 · 2020-08-31T10:27:44Z

Maybe we should include "Noto Sans" as font and use it as default? It looks clear and is readable and covers many character systems, seems to work with Arabic and so on. I know, design is not finished yet.

Anyway, the whole discussion above was about the local fonts feature in general, not about the changes to it made by this PR.

But as long as we have no other (dummy) PR or issue where we can discuss that, I am ok with it to continue here.

richard67 · 2020-08-31T10:30:40Z

Update: It seems to be a bit big, the whole "Noto Sans" font package. Some 1.1. GB. Not sure if we should ship it with the core. Any opinions?

richard67 · 2020-08-31T10:42:59Z

I just see the 1.1 GB are for the complete "Noto" font family, which includes some 50% serif fonts and a bunch of historical writing systems like "Noto Sans Ugaritic", "Noto Sans Runic" or hieroglyphs, which we will for sure not need. So at the end we won't need many fonts, the "Noto Sans" covers already Greece and Cyrillic completely.

brianteeman · 2020-08-31T11:11:06Z

richard67 · 2020-08-31T11:16:48Z

Yes, "Noto Sans" seems to be sufficient for the most languages.

richard67 · 2020-09-04T16:51:12Z

Back to draft because changes have to be made for different fonts due to the upcoming design. I'll either modify this PR or make a new one soon.

richard67 · 2020-09-06T00:20:23Z

Closing in favour of #61 .

richard67 added 3 commits August 30, 2020 17:20

Move the woff and woff2 files to sub-folders

918228d

Generalise and clean-up

7c2abe6

- More general name of the option, i.e. not use "Google". - Simplify UX: Only one field for controlling the use of extra fonts. - Remove the description. - Use a list field and not a filelist in order to be able to set nice font names.

Fix value of "None" option

1717c4f

richard67 changed the title ~~[WiP] Google Fonts - Generalise option name, clean-up fonts folder and simplify UX~~ Google Fonts - Generalise option name, clean-up fonts folder and simplify UX Aug 30, 2020

richard67 marked this pull request as ready for review August 30, 2020 16:32

brianteeman reviewed Aug 30, 2020

View reviewed changes

Language string: remove useless part, correct capitalisation

3e5edb3

chmst reviewed Aug 30, 2020

View reviewed changes

templates/cassiopeia/templateDetails.xml Show resolved Hide resolved

Merge branch 'development' into generalise-and-clean-up-google-fonts

60fc6c8

richard67 changed the title ~~Google Fonts - Generalise option name, clean-up fonts folder and simplify UX~~ [WiP] Google Fonts - Generalise option name, clean-up fonts folder and simplify UX Sep 4, 2020

richard67 marked this pull request as draft September 4, 2020 16:51

Merge branch 'development' into generalise-and-clean-up-google-fonts

79b5b6f

richard67 mentioned this pull request Sep 6, 2020

Change "Google Fonts" to "Font Schemes", multiple enhancements and clean up #61

Merged

richard67 closed this Sep 6, 2020

richard67 deleted the generalise-and-clean-up-google-fonts branch September 6, 2020 00:20

Uh oh!

Conversation

richard67 commented Aug 30, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary of Changes

Testing Instructions

Expected result

Actual result

Documentation Changes Required

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

brianteeman Aug 30, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

brianteeman commented Aug 30, 2020

Uh oh!

brianteeman commented Aug 30, 2020

Uh oh!

richard67 commented Aug 30, 2020

Uh oh!

brianteeman commented Aug 30, 2020

Uh oh!

richard67 commented Aug 30, 2020

Uh oh!

brianteeman commented Aug 30, 2020

Uh oh!

richard67 commented Aug 30, 2020

Uh oh!

brianteeman commented Aug 30, 2020

Uh oh!

richard67 commented Aug 30, 2020

Uh oh!

Uh oh!

richard67 commented Aug 31, 2020

Uh oh!

richard67 commented Aug 31, 2020

Uh oh!

richard67 commented Aug 31, 2020

Uh oh!

brianteeman commented Aug 31, 2020

Uh oh!

richard67 commented Aug 31, 2020

Uh oh!

richard67 commented Sep 4, 2020

Uh oh!

richard67 commented Sep 6, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

richard67 commented Aug 30, 2020 •

edited

Loading

brianteeman Aug 30, 2020 •

edited

Loading