Merge pull request joomla#61 from richard67/development-fonts-enhance…

…ments

Change "Google Fonts" to "Font Schemes", multiple enhancements and clean up
- Remove previosly added local fonts.
- Do not use `build/media_source/fonts` and `media/fonts` anymore.
- Only use local fonts which are already available in the core - currently this is only Roboto, which is used by Atum and comes as NPM dependency).
- Add back the possibility to use fonts from web.
- Add 2 font schemes using Google Fonts from web for testing the new design.
- Use CSS variables to set font families and weights for headings and body - more variables might be added later with this PR or future PR while the final design is being implemented.
- Simplify UX: Only one grouped list field for selecting the font schemes or no font scheme, ie no need to first switch it on with one switcher and then in another field selecting the font scheme, it can be done in one step now.
- Remove the description from the remaining field.
- Show a warning note about possible GDPR issues with fonts from web and possible performance issues with fonts from local folders.

build/build-modules-js/compilecss.es6.js

@@ -44,6 +44,9 @@ module.exports.compile = (options, path) => {
           `${RootPath}/templates/cassiopeia/scss/offline.scss`,
           `${RootPath}/templates/cassiopeia/scss/template.scss`,
           `${RootPath}/templates/cassiopeia/scss/template-rtl.scss`,
+          `${RootPath}/templates/cassiopeia/scss/global/fonts-local_roboto.scss`,
+          `${RootPath}/templates/cassiopeia/scss/global/fonts-web_poppins+roboto.scss`,
+          `${RootPath}/templates/cassiopeia/scss/global/fonts-web_roboto+noto-sans.scss`,
           `${RootPath}/templates/cassiopeia/scss/global/colors_autumn.scss`,
           `${RootPath}/templates/cassiopeia/scss/global/colors_spring.scss`,
           `${RootPath}/templates/cassiopeia/scss/global/colors_summer.scss`,
@@ -71,7 +74,7 @@ module.exports.compile = (options, path) => {
 
       // Loop to get the files that should be compiled via parameter
       folders.forEach((folder) => {
-        Recurs(folder, ['*.js', '*.map', '*.svg', '*.png', '*.gif', '*.swf', '*.html', '*.json', '*.woff', '*.woff2']).then(
+        Recurs(folder, ['*.js', '*.map', '*.svg', '*.png', '*.gif', '*.swf', '*.html', '*.json']).then(
           (filesRc) => {
             filesRc.forEach(
               (file) => {

installation/sql/mysql/base.sql

@@ -797,7 +797,7 @@ CREATE TABLE IF NOT EXISTS `#__template_styles` (
 
 INSERT INTO `#__template_styles` (`id`, `template`, `client_id`, `home`, `title`, `inheritable`, `parent`, `params`) VALUES
 (10, 'atum', 1, '1', 'atum - Default', 0, '', ''),
-(11, 'cassiopeia', 0, '1', 'cassiopeia - Default', 0, '', '{"logoFile":"","fluidContainer":"0","sidebarLeftWidth":"3","sidebarRightWidth":"3","googleFont":"1","googleFontName":"fira-sans"}');
+(11, 'cassiopeia', 0, '1', 'cassiopeia - Default', 0, '', '{"logoFile":"","fluidContainer":"0","sidebarLeftWidth":"3","sidebarRightWidth":"3"}');
 
 -- --------------------------------------------------------
 

installation/sql/postgresql/base.sql

@@ -812,7 +812,7 @@ CREATE INDEX "#__template_styles_idx_client_id_home" ON "#__template_styles" ("c
 --
 INSERT INTO "#__template_styles" ("id", "template", "client_id", "home", "title", "inheritable", "parent", "params") VALUES
 (10, 'atum', 1, '1', 'atum - Default', 0, '', ''),
-(11, 'cassiopeia', 0, '1', 'cassiopeia - Default', 0, '', '{"logoFile":"","fluidContainer":"0","sidebarLeftWidth":"3","sidebarRightWidth":"3","googleFont":"1","googleFontName":"fira-sans"}');
+(11, 'cassiopeia', 0, '1', 'cassiopeia - Default', 0, '', '{"logoFile":"","fluidContainer":"0","sidebarLeftWidth":"3","sidebarRightWidth":"3"}');
 
 SELECT setval('#__template_styles_id_seq', 12, false);
 

language/en-GB/tpl_cassiopeia.ini

@@ -12,13 +12,12 @@ TPL_CASSIOPEIA_COLOR_NAME_SUMMER="Summer"
 TPL_CASSIOPEIA_COLOR_NAME_WINTER="Winter"
 TPL_CASSIOPEIA_FLUID="Fluid"
 TPL_CASSIOPEIA_FLUID_LABEL="Fluid Layout"
+TPL_CASSIOPEIA_FONT_GROUP_LOCAL="Fonts from Folder"
+TPL_CASSIOPEIA_FONT_GROUP_WEB="Fonts from Web"
+TPL_CASSIOPEIA_FONT_LABEL="Fonts Scheme"
+TPL_CASSIOPEIA_FONT_NOTE_TEXT="Loading fonts from external sources might be against privacy regulations in some countries.<br>Loading fonts from a local folder might have a performance impact on your site."
 TPL_CASSIOPEIA_LOGO_LABEL="Logo"
 TPL_CASSIOPEIA_STATIC="Static"
 TPL_CASSIOPEIA_STICKY_LABEL="Sticky Header"
 TPL_CASSIOPEIA_TOGGLE="Toggle Navigation"
 TPL_CASSIOPEIA_XML_DESCRIPTION="Continuing the space theme (Solarflare from 1.0, Milkyway from 1.5 and Protostar from 3.0), Cassiopeia is the Joomla 4 site template based on Bootstrap 4."
-TPL_CASSIOPEIA_FONT_LABEL="Google font for text and headings"
-TPL_CASSIOPEIA_FONT_DESC="Load Google font for text and headings (H1, H2, H3, etc)."
-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."
-

templates/cassiopeia/index.php

@@ -37,6 +37,17 @@
 $wa->registerAndUseStyle($assetColorName, $templatePath . '/css/global/' . $paramsColorName . '.css');
 $this->getPreloadManager()->preload($wa->getAsset('style', $assetColorName)->getUri(), ['as' => 'style']);
 
+// Use a font scheme if not "None" is set in the template style options
+$paramsFontScheme = $this->params->get('useFontScheme', 'fonts-local_roboto');
+
+if ($paramsFontScheme)
+{
+	// Preload the stylesheet for the font scheme, actually we need to preload the font(s)
+	$assetFontScheme  = 'fontscheme.' . $paramsFontScheme;
+	$wa->registerAndUseStyle($assetFontScheme, $templatePath . '/css/global/' . $paramsFontScheme . '.css');
+	$this->getPreloadManager()->preload($wa->getAsset('style', $assetFontScheme)->getUri(), ['as' => 'style']);
+}
+
 // Enable assets
 $wa->usePreset('template.cassiopeia.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr'))
 	->useStyle('template.active.language')
@@ -46,21 +57,6 @@
 // Override 'template.active' asset to set correct ltr/rtl dependency
 $wa->registerStyle('template.active', '', [], [], ['template.cassiopeia.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr')]);
 
-// Use of Google Font
-if ($this->params->get('googleFont'))
-{
-	// Preload the stylesheet for the font, actually we need to preload the font
-	$paramsFontName = $this->params->get('googleFontName');
-
-	if ($paramsFontName)
-	{
-		$assetFontName  = 'font.' . $paramsFontName;
-
-		$wa->registerAndUseStyle($assetFontName, 'media/fonts/' . $paramsFontName . '.css');
-		$this->getPreloadManager()->preload($wa->getAsset('style', $assetFontName)->getUri(), ['as' => 'style']);
-	}
-}
-
 // Logo file or site title param
 if ($this->params->get('logoFile'))
 {

templates/cassiopeia/scss/blocks/_global.scss

@@ -13,6 +13,7 @@ html {
 }
 
 body {
+  font-family: var(--cassiopeia-font-family-body);
   padding: 0;
   margin: 0;
   line-height: 1.6;
@@ -29,7 +30,8 @@ h3,
 h4,
 h5,
 h6 {
-  font-weight: bold;
+  font-family: var(--cassiopeia-font-family-headings);
+  font-weight: var(--cassiopeia-font-weight-headings);
 }
 
 a {

templates/cassiopeia/scss/global/fonts-local_roboto.scss

@@ -0,0 +1,8 @@
+// Fonts
+@import "../../../media/vendor/roboto-fontface/scss/roboto/roboto-fontface.css";
+
+:root {
+  --cassiopeia-font-family-body: "Roboto", sans-serif;
+  --cassiopeia-font-family-headings: "Roboto", sans-serif;
+  --cassiopeia-font-weight-headings: bold;
+}

templates/cassiopeia/scss/global/fonts-web_poppins+roboto.scss

@@ -0,0 +1,8 @@
+// Fonts
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;700&family=Roboto:wght@400;700&display=swap');
+
+:root {
+  --cassiopeia-font-family-body: "Roboto", sans-serif;
+  --cassiopeia-font-family-headings: "Poppins", sans-serif;
+  --cassiopeia-font-weight-headings: normal;
+}

templates/cassiopeia/scss/global/fonts-web_roboto+noto-sans.scss

@@ -0,0 +1,8 @@
+// Fonts
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@100;300;400;700&family=Roboto:wght@100;300;400;700&display=swap');
+
+:root {
+  --cassiopeia-font-family-body: "Noto Sans", sans-serif;
+  --cassiopeia-font-family-headings: "Roboto", sans-serif;
+  --cassiopeia-font-weight-headings: normal;
+}

templates/cassiopeia/templateDetails.xml

@@ -70,16 +70,29 @@
 				/>
 
 				<field
-					name="fluidContainer"
-					type="radio"
-					layout="joomla.form.field.radio.switcher"
-					default="0"
-					label="TPL_CASSIOPEIA_FLUID_LABEL"
+					name="useFontScheme"
+					type="groupedlist"
+					label="TPL_CASSIOPEIA_FONT_LABEL"
+					default="fonts-local_roboto"
 					>
-					<option value="1">TPL_CASSIOPEIA_FLUID</option>
-					<option value="0">TPL_CASSIOPEIA_STATIC</option>
+					<option value="0">JNONE</option>
+					<group label="TPL_CASSIOPEIA_FONT_GROUP_LOCAL">
+						<option value="fonts-local_roboto">Roboto (local)</option>
+					</group>
+					<group label="TPL_CASSIOPEIA_FONT_GROUP_WEB">
+						<option value="fonts-web_poppins+roboto">Poppins + Roboto (web)</option>
+						<option value="fonts-web_roboto+noto-sans">Roboto + Noto Sans (web)</option>
+					</group>
 				</field>
 
+				<field
+					name="noteFontScheme"
+					type="note"
+					label="TPL_CASSIOPEIA_FONT_NOTE_TEXT"
+					heading="p"
+					class="alert alert-warning"
+				/>
+
 				<field
 					name="colorName"
 					type="list"
@@ -92,6 +105,17 @@
 					<option value="colors_winter">TPL_CASSIOPEIA_COLOR_NAME_WINTER</option>
 				</field>
 
+				<field
+					name="fluidContainer"
+					type="radio"
+					layout="joomla.form.field.radio.switcher"
+					default="0"
+					label="TPL_CASSIOPEIA_FLUID_LABEL"
+					>
+					<option value="1">TPL_CASSIOPEIA_FLUID</option>
+					<option value="0">TPL_CASSIOPEIA_STATIC</option>
+				</field>
+
 				<field
 					name="stickyHeader"
 					type="radio"
@@ -115,32 +139,6 @@
 					<option value="0">JNO</option>
 					<option value="1">JYES</option>
 				</field>
-
-				<field
-					name="googleFont"
-					type="radio"
-					label="TPL_CASSIOPEIA_FONT_LABEL"
-					description="TPL_CASSIOPEIA_FONT_DESC"
-					class="btn-group btn-group-yesno"
-					default="1"
-					>
-					<option value="1">JYES</option>
-					<option value="0">JNO</option>
-				</field>
-
-				<field
-					name="googleFontName"
-					type="filelist"
-					label="TPL_CASSIOPEIA_FONT_NAME_LABEL"
-					description="TPL_CASSIOPEIA_FONT_NAME_DESC"
-					stripext="1"
-					directory="media/fonts/"
-					hide_none="1"
-					hide_default="1"
-					fileFilter="\.css$"
-					exclude="\.min\.css$"
-					showon="googleFont:1"
-				/>
 			</fieldset>
 		</fields>
 	</config>