src/media/css/fonts/osaka.css

@@ -0,0 +1,13 @@
+/**
+ * @package     MokoCassiopeia
+ * @copyright   (C) 2026 Moko Consulting <hello@mokoconsulting.tech>
+ * @license     GNU General Public License version 3 or later
+ */
+
+@font-face {
+font-family: 'Osaka';
+src: url('../../fonts/osaka-re.ttf') format('truetype');
+font-weight: normal;
+font-style: normal;
+font-display: swap;
+}

src/media/css/user.css

@@ -20,6 +20,7 @@
 /* Site title styling - match nav background color */
 .site-title {
 	color: var(--nav-bg-color);
+	font-family: 'Osaka', sans-serif;
 	font-weight: 600;
 	font-size: 1.5rem;
 	text-decoration: none;

src/templates/component.php

@@ -100,6 +100,9 @@ try {
 // Scripts
 $wa->useScript('template.js');
 
+// Load Osaka font for site title
+$wa->useStyle('template.font.osaka');
+
 /**
  * VirtueMart detection:
  * - Component must exist and be enabled

src/templates/error.php

@@ -89,6 +89,9 @@ try {
 // Scripts
 $wa->useScript('template.js');
 
+// Load Osaka font for site title
+$wa->useStyle('template.font.osaka');
+
 // Smart Bootstrap component loading - only load what's needed
 if ($this->countModules('drawer-left', true) || $this->countModules('drawer-right', true)) {
 	// Load Bootstrap Offcanvas component for drawers

src/templates/index.php

@@ -121,6 +121,9 @@ try {
 // Scripts
 $wa->useScript('template.js');
 
+// Load Osaka font for site title
+$wa->useStyle('template.font.osaka');
+
 // Load GTM script if GTM is enabled
 if (!empty($params_googletagmanager) && !empty($params_googletagmanagerid)) {
 	$wa->useScript('gtm.js');

src/templates/joomla.asset.json

@@ -46,6 +46,12 @@
 			"uri": "media/templates/site/mokocassiopeia/css/user.min.css",
 			"attributes": {"media": "all"}
 		},
+		{
+			"name": "template.font.osaka",
+			"type": "style",
+			"uri": "media/templates/site/mokocassiopeia/css/fonts/osaka.css",
+			"attributes": {"media": "all"}
+		},
 		{
 			"name": "template.editor",
 			"type": "style",

src/templates/templateDetails.xml

@@ -202,7 +202,7 @@
 
 				<!-- Typography -->
 				<field name="theme_sep_typo" type="spacer" label="Typography" hr="false" class="text fw-bold" />
-				<field name="useFontScheme" type="groupedlist" label="TPL_MOKOCASSIOPEIA_FONT_LABEL" default="0">
+				<field name="useFontScheme" type="groupedlist" label="TPL_MOKOCASSIOPEIA_FONT_LABEL" default="media/templates/site/mokocassiopeia/css/colors/fonts-local_roboto.css">
 					<option value="0">JNONE</option>
 					<group label="TPL_MOKOCASSIOPEIA_FONT_GROUP_LOCAL">
 						<option value="media/templates/site/mokocassiopeia/css/colors/fonts-local_roboto.css">Roboto (local)</option>