Update font to "Category A" licensed font (CO-2445)

NOTICE

@@ -65,9 +65,9 @@ files and utilities for further information:
  Apache 2.0
  https://fonts.google.com/icons?selected=Material+Icons 
 
- Noto Sans (app/webroot/css/fonts/notosans_*)
- SIL Open Font License
- https://fonts.google.com/noto/specimen/Noto+Sans
+ Open Sans (app/webroot/css/fonts/opensans)
+ Apache 2.0
+ https://fonts.google.com/specimen/Open+Sans
 
  noty (app/webroot/js/jquery/noty)
  MIT License

app/templates/element/badgeList.php

@@ -27,7 +27,7 @@
  *    'color' => BadgeColorModeEnum::Blue,
  *    'outline' => false,
  *    'pill' => true,
- *    'fa_class' => 'fa-key',
+ *    'icon' => 'material-icons-key',
  *   ),
  * );
  *
@@ -48,13 +48,13 @@
 
 foreach($vv_badge_list as $badge) {
   $badge_classes = [];
-  $fa_element = "";
+  $icon = "";
 
   if(isset($badge['pill']) && $badge['pill']) {
     $badge_classes[] = "rounded-pill";
   }
-  if(!empty($badge['fa_class'])) {
-    $fa_element = '<i class="mr-1 fa ' . $badge["fa_class"] .'"></i>';
+  if(!empty($badge['icon'])) {
+    $icon = '<i class="mr-1 material-icons" aria-hidden="true">' . $badge["icon"] .'</i>';
   }
   if(isset($badge['outline']) && $badge['outline']) {
     $badge_classes[] = "bg-outline-" . $badge['color'];
@@ -69,7 +69,7 @@
   // Print the Badge
   print $this->Html->tag(
     'span',
-    $fa_element . $badge['text'],
+    $icon . $badge['text'],
     [
       'class' => 'mr-1 badge ' . implode(' ', $badge_classes),
       'escape' => false,

app/webroot/css/co-base.css

@@ -25,11 +25,11 @@
  */
 
 /* HTML, BODY, HEADINGS, ANCHORS, FONTS */
-@import url("fonts/notosans_regular/stylesheet.css");
+@import url("fonts/opensans/stylesheet.css");
 @import url("fonts/material-icons/material-icons.css");
 
 html * {
-  font-family: 'Noto Sans','Trebuchet MS',Arial,Helvetica,sans-serif;
+  font-family: 'open_sansregular','Trebuchet MS',Arial,Helvetica,sans-serif;
 }
 body {
   color: var(--cmg-color-gray-001);

app/webroot/css/fonts/material-icons/material-icons.css

@@ -1,36 +1,124 @@
 @font-face {
-  font-family: 'Material Icons';
+  font-family: "Material Icons";
   font-style: normal;
   font-weight: 400;
-  src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
-  src: local('Material Icons'),
-       local('MaterialIcons-Regular'),
-       url(MaterialIcons-Regular.woff2) format('woff2'),
-       url(MaterialIcons-Regular.woff) format('woff'),
-       url(MaterialIcons-Regular.ttf) format('truetype');
+  font-display: block;
+  src: url("./material-icons.woff2") format("woff2"), url("./material-icons.woff") format("woff");
 }
-
 .material-icons {
-  font-family: 'Material Icons';
+  font-family: "Material Icons";
   font-weight: normal;
   font-style: normal;
-  font-size: 24px;  /* Preferred icon size */
-  display: inline-block;
+  font-size: 24px;
   line-height: 1;
-  text-transform: none;
   letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
   word-wrap: normal;
+  direction: ltr;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  font-feature-settings: "liga";
+}
+
+@font-face {
+  font-family: "Material Icons Outlined";
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url("./material-icons-outlined.woff2") format("woff2"), url("./material-icons-outlined.woff") format("woff");
+}
+.material-icons-outlined {
+  font-family: "Material Icons Outlined";
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
   white-space: nowrap;
+  word-wrap: normal;
   direction: ltr;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  font-feature-settings: "liga";
+}
 
-  /* Support for all WebKit browsers. */
+@font-face {
+  font-family: "Material Icons Round";
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url("./material-icons-round.woff2") format("woff2"), url("./material-icons-round.woff") format("woff");
+}
+.material-icons-round {
+  font-family: "Material Icons Round";
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
   -webkit-font-smoothing: antialiased;
-  /* Support for Safari and Chrome. */
+  -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
+  font-feature-settings: "liga";
+}
 
-  /* Support for Firefox. */
+@font-face {
+  font-family: "Material Icons Sharp";
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url("./material-icons-sharp.woff2") format("woff2"), url("./material-icons-sharp.woff") format("woff");
+}
+.material-icons-sharp {
+  font-family: "Material Icons Sharp";
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  font-feature-settings: "liga";
+}
 
-  /* Support for IE. */
-  font-feature-settings: 'liga';
+@font-face {
+  font-family: "Material Icons Two Tone";
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url("./material-icons-two-tone.woff2") format("woff2"), url("./material-icons-two-tone.woff") format("woff");
+}
+.material-icons-two-tone {
+  font-family: "Material Icons Two Tone";
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  font-feature-settings: "liga";
 }