diff --git a/js/app/ui/system_info.js b/js/app/ui/system_info.js
index 251bd0ab..010f47b1 100644
--- a/js/app/ui/system_info.js
+++ b/js/app/ui/system_info.js
@@ -39,7 +39,10 @@ define([
         tableToolsActionClass: 'pf-table-tools-action',                         // class for "edit" action
 
         descriptionTextareaElementClass: 'pf-system-info-description',          // class for "description" textarea element (xEditable)
-        descriptionTextareaCharCounter: 'pf-form-field-char-count'              // class for "character counter" element for form field
+        descriptionTextareaCharCounter: 'pf-form-field-char-count',             // class for "character counter" element for form field
+
+        // fonts
+        fontTriglivianClass: 'pf-triglivian'                                    // class for "Triglivian" names (e.g. Abyssal systems)
     };
 
     // disable Module update temporary (until. some requests/animations) are finished
@@ -54,7 +57,7 @@ define([
     /**
      * set module observer and look for relevant system data to update
      */
-    let setModuleObserver = function(moduleElement){
+    let setModuleObserver = (moduleElement) => {
         $(document).off('pf:updateSystemInfoModule').on('pf:updateSystemInfoModule', function(e, data){
             if(data){
                 moduleElement.updateSystemInfoModule(data);
@@ -66,7 +69,7 @@ define([
      * shows the tool action element by animation
      * @param toolsActionElement
      */
-    let showToolsActionElement = function(toolsActionElement){
+    let showToolsActionElement = (toolsActionElement) => {
         toolsActionElement.velocity('stop').velocity({
             opacity: 1,
             height: '100%'
@@ -81,7 +84,7 @@ define([
      * hides the tool action element by animation
      * @param toolsActionElement
      */
-    let hideToolsActionElement = function(toolsActionElement){
+    let hideToolsActionElement = (toolsActionElement) => {
         toolsActionElement.velocity('stop').velocity('reverse', {
             display: 'none',
             visibility: 'hidden'
@@ -175,7 +178,7 @@ define([
      * @param mapId
      * @param systemData
      */
-    let getModule = function(parentElement, mapId, systemData){
+    let getModule = (parentElement, mapId, systemData) => {
 
         // create new module container
         let moduleElement = $('<div>');
@@ -236,7 +239,6 @@ define([
                         inputclass: config.descriptionTextareaElementClass,
                         tpl: '<textarea maxlength="' + maxDescriptionLength + '"></textarea>',
                         params: function(params){
-
                             params.mapData = {
                                 id: mapId
                             };
@@ -396,6 +398,12 @@ define([
             descriptionButtonClass: config.addDescriptionButtonClass,
             tableToolsActionClass: config.tableToolsActionClass,
             descriptionTextareaClass: config.descriptionTextareaElementClass,
+            systemNameClass: () => {
+                return (val, render) => {
+                    console.log(config.fontTriglivianClass)
+                    return  render(val) === 'A' ? config.fontTriglivianClass : '';
+                };
+            },
 
             shatteredWormholeInfo: shatteredWormholeInfo,
 
@@ -418,7 +426,7 @@ define([
      * @param mapId
      * @param systemData
      */
-    let initModule = function(moduleElement, mapId, systemData){
+    let initModule = (moduleElement, mapId, systemData) => {
         // set module observer
         setModuleObserver(moduleElement);
 
diff --git a/public/js/v1.3.5/app/ui/system_info.js b/public/js/v1.3.5/app/ui/system_info.js
index 251bd0ab..010f47b1 100644
--- a/public/js/v1.3.5/app/ui/system_info.js
+++ b/public/js/v1.3.5/app/ui/system_info.js
@@ -39,7 +39,10 @@ define([
         tableToolsActionClass: 'pf-table-tools-action',                         // class for "edit" action
 
         descriptionTextareaElementClass: 'pf-system-info-description',          // class for "description" textarea element (xEditable)
-        descriptionTextareaCharCounter: 'pf-form-field-char-count'              // class for "character counter" element for form field
+        descriptionTextareaCharCounter: 'pf-form-field-char-count',             // class for "character counter" element for form field
+
+        // fonts
+        fontTriglivianClass: 'pf-triglivian'                                    // class for "Triglivian" names (e.g. Abyssal systems)
     };
 
     // disable Module update temporary (until. some requests/animations) are finished
@@ -54,7 +57,7 @@ define([
     /**
      * set module observer and look for relevant system data to update
      */
-    let setModuleObserver = function(moduleElement){
+    let setModuleObserver = (moduleElement) => {
         $(document).off('pf:updateSystemInfoModule').on('pf:updateSystemInfoModule', function(e, data){
             if(data){
                 moduleElement.updateSystemInfoModule(data);
@@ -66,7 +69,7 @@ define([
      * shows the tool action element by animation
      * @param toolsActionElement
      */
-    let showToolsActionElement = function(toolsActionElement){
+    let showToolsActionElement = (toolsActionElement) => {
         toolsActionElement.velocity('stop').velocity({
             opacity: 1,
             height: '100%'
@@ -81,7 +84,7 @@ define([
      * hides the tool action element by animation
      * @param toolsActionElement
      */
-    let hideToolsActionElement = function(toolsActionElement){
+    let hideToolsActionElement = (toolsActionElement) => {
         toolsActionElement.velocity('stop').velocity('reverse', {
             display: 'none',
             visibility: 'hidden'
@@ -175,7 +178,7 @@ define([
      * @param mapId
      * @param systemData
      */
-    let getModule = function(parentElement, mapId, systemData){
+    let getModule = (parentElement, mapId, systemData) => {
 
         // create new module container
         let moduleElement = $('<div>');
@@ -236,7 +239,6 @@ define([
                         inputclass: config.descriptionTextareaElementClass,
                         tpl: '<textarea maxlength="' + maxDescriptionLength + '"></textarea>',
                         params: function(params){
-
                             params.mapData = {
                                 id: mapId
                             };
@@ -396,6 +398,12 @@ define([
             descriptionButtonClass: config.addDescriptionButtonClass,
             tableToolsActionClass: config.tableToolsActionClass,
             descriptionTextareaClass: config.descriptionTextareaElementClass,
+            systemNameClass: () => {
+                return (val, render) => {
+                    console.log(config.fontTriglivianClass)
+                    return  render(val) === 'A' ? config.fontTriglivianClass : '';
+                };
+            },
 
             shatteredWormholeInfo: shatteredWormholeInfo,
 
@@ -418,7 +426,7 @@ define([
      * @param mapId
      * @param systemData
      */
-    let initModule = function(moduleElement, mapId, systemData){
+    let initModule = (moduleElement, mapId, systemData) => {
         // set module observer
         setModuleObserver(moduleElement);
 
diff --git a/public/templates/modules/system_info.html b/public/templates/modules/system_info.html
index f981a159..f2e16bb7 100644
--- a/public/templates/modules/system_info.html
+++ b/public/templates/modules/system_info.html
@@ -1,5 +1,5 @@
 <div class="pf-module-head">
-    <h5 class="pull-right" data-toggle="tooltip" data-placement="top" data-container="body" title="alias">
+    <h5 class="pull-right {{#systemNameClass}}{{system.security}}{{/systemNameClass}}" data-toggle="tooltip" data-placement="top" data-container="body" title="alias">
         {{#system.alias}}
         {{system.alias}}
         {{/system.alias}}
@@ -10,7 +10,7 @@
 
     <h5 class="pf-module-handler-drag"></h5>
     <h5>
-        <span data-toggle="tooltip" data-placement="top" data-container="body" title="system">{{system.name}}</span>
+        <span data-toggle="tooltip" data-placement="top" data-container="body" title="system" class="{{#systemNameClass}}{{system.security}}{{/systemNameClass}}">{{system.name}}</span>
         {{#system.locked}}
         <i class="fas fa-fw fa-lock"></i>
         {{/system.locked}}
@@ -61,7 +61,7 @@
                         <i class="fas fa-fw fa-question-circle"></i>
                     </th>
                     <th>Name</th>
-                    <th class="text-right">{{system.name}}</th>
+                    <th class="text-right {{#systemNameClass}}{{system.security}}{{/systemNameClass}}">{{system.name}}</th>
                     <th class="pf-table-cell-20 text-right {{securityClass}}">{{system.security}}</th>
                 </tr>
                 </thead>