1 files changed, 34 insertions, 19 deletions

diff --git a/openecomp-ui/resources/scss/common/_typography.scss b/openecomp-ui/resources/scss/common/_typography.scss
index 1543f0adcd..94e1ba4d61 100644
--- a/openecomp-ui/resources/scss/common/_typography.scss
+++ b/openecomp-ui/resources/scss/common/_typography.scss
@@ -1,22 +1,26 @@
 /* Fonts */
 
 @mixin base-font-regular() {
-  font-family: omnes-regular, Arial, sans-serif;
+  font-family: OpenSans, OpenSans-Regular, 'Open Sans',omnes-regular, Arial, sans-serif;
 }
 
 @mixin base-font-light() {
-  font-family: omnes-light, Arial, sans-serif;
+  font-family: OpenSans-Light, 'Open Sans', omnes-light, Arial, sans-serif;
 }
 
-@mixin base-font-medium() {
-  font-family: omnes-medium, Arial, sans-serif;
+@mixin base-font-italic(){
+  font-family: OpenSans-Italic, 'Open Sans', omnes-italic, Arial, sans-serif;
+}
+
+@mixin base-font-semibold() {
+  font-family: OpenSans-Semibold, 'Open Sans', omnes-medium, Arial, sans-serif;
 }
 
 @mixin base-font-bold() {
-  font-family: omnes-bold, Arial, sans-serif;
+  font-family: OpenSans-Bold, 'Open Sans', omnes-bold, Arial, sans-serif;
 }
 
-$heading-font-1: 36px;
+$heading-font-1: 28px;
 $heading-font-2: 24px;
 $heading-font-3: 20px;
 $heading-font-4: 18px;
@@ -25,6 +29,7 @@ $heading-font-5: 16px;
 $body-font-1: 14px;
 $body-font-2: 13px;
 $body-font-3: 12px;
+$body-font-4: 10px;
 
 $icon-font-size: 11px;
 $icon-font-family: Arial;
@@ -52,8 +57,8 @@ $radio-font-family: Arial;
   @extend .text-uppercase !optional;
 }
 
-.heading-3-medium {
-  @include base-font-medium;
+.heading-3-semibold {
+  @include base-font-semibold;
   font-size: $heading-font-3;
   @extend .text-uppercase !optional;
 }
@@ -63,8 +68,8 @@ $radio-font-family: Arial;
   font-size: $heading-font-4;
 }
 
-.heading-4-medium {
-  @include base-font-medium;
+.heading-4-semibold {
+  @include base-font-semibold;
   font-size: $heading-font-4;
 }
 
@@ -73,8 +78,8 @@ $radio-font-family: Arial;
   font-size: $heading-font-5;
 }
 
-.heading-5-medium {
-  @include base-font-medium;
+.heading-5-semibold {
+  @include base-font-semibold;
   font-size: $heading-font-5;
 }
 
@@ -83,8 +88,8 @@ $radio-font-family: Arial;
   font-size: $body-font-1;
 }
 
-.body-1-medium {
-  @include base-font-medium;
+.body-1-semibold {
+  @include base-font-semibold;
   font-size: $body-font-1;
 }
 
@@ -98,8 +103,8 @@ $radio-font-family: Arial;
   font-size: $body-font-2;
 }
 
-.body-2-medium {
-  @include base-font-medium;
+.body-2-semibold {
+  @include base-font-semibold;
   font-size: $body-font-2;
 }
 
@@ -108,18 +113,28 @@ $radio-font-family: Arial;
   font-size: $body-font-3;
 }
 
-.body-3-medium {
-  @include base-font-medium;
+.body-3-semibold {
+  @include base-font-semibold;
   font-size: $body-font-3;
 }
 
+.body-4 {
+  @include base-font-regular;
+  font-size: $body-font-4;
+}
+
+.body-4-semibold {
+  @include base-font-semibold;
+  font-size: $body-font-4;
+}
+
 .body-3-light {
   @include base-font-light;
   font-size: $body-font-3;
 }
 
 .circle-icon-text {
-  @include base-font-medium;
+  @include base-font-semibold;
   font-size: $body-font-1;
 }