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

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>