Fonts added:

	- Camataran for body text
	- Montserrat for heading text
	- Variable files added

frontend/angular/src/app/components/my-career-web/auth/forgot-password/forgot-password.component.scss

+@import "~styles/my-career-styles/variables";
+
 .bck-link {
     position: absolute;
     color: #12A8DE;
@@ -10,7 +12,7 @@
     align-items: center;
 
     span {
-        font-family: "Museo Sans Rounded", sans-serif;
+        font-family: $bodyFont;
         font-size: 14px;
         letter-spacing: 0;
         padding-left: 10px;
@@ -34,7 +36,7 @@
 
     .title-goes-here {
         color: #58595B;
-        font-family: 'Futura', sans-serif;
+        font-family: $headingFont;
         font-size: 24px;
         font-weight: bold;
         letter-spacing: 0;
@@ -45,7 +47,7 @@
 
     .subtitle-giving-cont {
         color: #58595B;
-        font-family: "Museo Sans Rounded";
+        font-family: $bodyFont;
         font-size: 18px;
         letter-spacing: 0;
         line-height: 27px;
@@ -83,7 +85,7 @@
 
 
         .forgot-password {
-            font-family: "Museo Sans Rounded", sans-serif;
+            font-family: $bodyFont;
             font-size: 14px;
             letter-spacing: 0;
             line-height: 21px;
@@ -92,7 +94,7 @@
 
         .signup-link {
             color: #58595B;
-            font-family: "Museo Sans Rounded", sans-serif;
+            font-family: $bodyFont;
             font-size: 14px;
             letter-spacing: 0;
             line-height: 21px;
@@ -106,7 +108,7 @@
     bottom: 32px;
     left: 43%;
     color: #808285;
-    font-family: "Museo Sans Rounded", sans-serif;
+    font-family: $bodyFont;
     font-size: 11px;
     letter-spacing: 0;
     line-height: 13px;

frontend/angular/src/app/components/my-career-web/auth/login/login.component.scss

+@import "~styles/my-career-styles/variables";
+
 .login-wrapper {
     position: relative;
     margin-bottom: 45px;
@@ -12,7 +14,7 @@
 
     .title-goes-here {
         color: #58595B;
-        font-family: 'Futura', sans-serif;
+        font-family: $headingFont;
         font-size: 24px;
         font-weight: bold;
         letter-spacing: 0;
@@ -23,7 +25,7 @@
 
     .subtitle-giving-cont {
         color: #58595B;
-        font-family: "Museo Sans Rounded", sans-serif;
+        font-family: $bodyFont;
         font-size: 18px;
         letter-spacing: 0;
         line-height: 27px;
@@ -79,7 +81,7 @@
 
 
         .forgot-password {
-            font-family: "Museo Sans Rounded", sans-serif;
+            font-family: $bodyFont;
             font-size: 14px;
             letter-spacing: 0;
             line-height: 21px;
@@ -88,7 +90,7 @@
 
         .signup-link {
             color: #58595B;
-            font-family: "Museo Sans Rounded", sans-serif;
+            font-family: $bodyFont;
             font-size: 14px;
             letter-spacing: 0;
             line-height: 21px;
@@ -102,7 +104,7 @@
     bottom: -10%;
     left: 43%;
     color: #808285;
-    font-family: "Museo Sans Rounded", sans-serif;
+    font-family: $bodyFont;
     font-size: 11px;
     letter-spacing: 0;
     line-height: 13px;

frontend/angular/src/app/components/my-career-web/auth/register/register.component.scss

+@import "~styles/my-career-styles/variables";
+
 .bck-link {
     position: absolute;
     color: #12A8DE;
@@ -10,7 +12,7 @@
     align-items: center;
 
     span {
-        font-family: "Museo Sans Rounded", sans-serif;
+        font-family: $bodyFont;
         font-size: 14px;
         letter-spacing: 0;
         padding-left: 10px;
@@ -35,7 +37,7 @@
 
     .title-goes-here {
         color: #58595B;
-        font-family: 'Futura', sans-serif;
+        font-family: $headingFont;
         font-size: 24px;
         font-weight: bold;
         letter-spacing: 0;
@@ -46,7 +48,7 @@
 
     .subtitle-giving-cont {
         color: #58595B;
-        font-family: "Museo Sans Rounded";
+        font-family: $bodyFont;
         font-size: 18px;
         letter-spacing: 0;
         line-height: 27px;
@@ -105,7 +107,7 @@
 
 
         .forgot-password {
-            font-family: "Museo Sans Rounded", sans-serif;
+            font-family: $bodyFont;
             font-size: 14px;
             letter-spacing: 0;
             line-height: 21px;
@@ -114,7 +116,7 @@
 
         .signup-link {
             color: #58595B;
-            font-family: "Museo Sans Rounded", sans-serif;
+            font-family: $bodyFont;
             font-size: 14px;
             letter-spacing: 0;
             line-height: 21px;
@@ -128,7 +130,7 @@
     bottom: -10%;
     left: 43%;
     color: #808285;
-    font-family: "Museo Sans Rounded", sans-serif;
+    font-family: $bodyFont;
     font-size: 11px;
     letter-spacing: 0;
     line-height: 13px;

frontend/angular/src/app/components/my-career-web/auth/reset-password/reset-password.component.scss

+@import "~styles/my-career-styles/variables";
+
 .bck-link {
     position: absolute;
     color: #12A8DE;
@@ -10,7 +12,7 @@
     align-items: center;
 
     span {
-        font-family: "Museo Sans Rounded", sans-serif;
+        font-family: $bodyFont;
         font-size: 14px;
         letter-spacing: 0;
         padding-left: 10px;
@@ -34,7 +36,7 @@
 
     .title-goes-here {
         color: #58595B;
-        font-family: 'Futura', sans-serif;
+        font-family: $headingFont;
         font-size: 24px;
         font-weight: bold;
         letter-spacing: 0;
@@ -45,7 +47,7 @@
 
     .subtitle-giving-cont {
         color: #58595B;
-        font-family: "Museo Sans Rounded";
+        font-family: $bodyFont;
         font-size: 18px;
         letter-spacing: 0;
         line-height: 27px;
@@ -98,12 +100,12 @@
     .login-form {
         border-radius: 4px;
         background-color: #FFFFFF;
-        box-shadow: 0 0 20px 0 rgba(128,130,133,0.13);
+        box-shadow: 0 0 20px 0 rgba(128, 130, 133, 0.13);
         padding: 24px 26px;
 
 
         .forgot-password {
-            font-family: "Museo Sans Rounded", sans-serif;
+            font-family: $bodyFont;
             font-size: 14px;
             letter-spacing: 0;
             line-height: 21px;
@@ -112,7 +114,7 @@
 
         .signup-link {
             color: #58595B;
-            font-family: "Museo Sans Rounded", sans-serif;
+            font-family: $bodyFont;
             font-size: 14px;
             letter-spacing: 0;
             line-height: 21px;
@@ -126,7 +128,7 @@
     bottom: 4%;
     left: 43%;
     color: #808285;
-    font-family: "Museo Sans Rounded", sans-serif;
+    font-family: $bodyFont;
     font-size: 11px;
     letter-spacing: 0;
     line-height: 13px;

frontend/angular/src/app/components/my-career-web/welcome/welcome.component.scss

+@import "~styles/my-career-styles/variables";
+
 .login-wrapper {
     position: relative;
     margin-bottom: 45px;
@@ -12,7 +14,7 @@
 
     .title-goes-here {
         color: #58595B;
-        font-family: 'Futura', sans-serif;
+        font-family: $headingFont;
         font-size: 24px;
         font-weight: bold;
         letter-spacing: 0;
@@ -23,7 +25,7 @@
 
     .subtitle-giving-cont {
         color: #58595B;
-        font-family: "Museo Sans Rounded";
+        font-family: $bodyFont;
         font-size: 18px;
         letter-spacing: 0;
         line-height: 27px;
@@ -77,7 +79,7 @@
     bottom: -10%;
     left: 43%;
     color: #808285;
-    font-family: "Museo Sans Rounded", sans-serif;
+    font-family: $bodyFont, sans-serif;
     font-size: 11px;
     letter-spacing: 0;
     line-height: 13px;

frontend/angular/src/assets/my-career-web/fonts/catamaran/catamaran.css

+/* catamaran-200 - latin */
+@font-face {
+    font-family: 'Catamaran';
+    font-style: normal;
+    font-weight: 200;
+    src: url('./catamaran-v6-latin-200.eot'); /* IE9 Compat Modes */
+    src: local('Catamaran ExtraLight'), local('Catamaran-ExtraLight'),
+    url('./catamaran-v6-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+    url('./catamaran-v6-latin-200.woff2') format('woff2'), /* Super Modern Browsers */
+    url('./catamaran-v6-latin-200.woff') format('woff'), /* Modern Browsers */
+    url('./catamaran-v6-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */
+    url('./catamaran-v6-latin-200.svg#Catamaran') format('svg'); /* Legacy iOS */
+}
+/* catamaran-300 - latin */
+@font-face {
+    font-family: 'Catamaran';
+    font-style: normal;
+    font-weight: 300;
+    src: url('./catamaran-v6-latin-300.eot'); /* IE9 Compat Modes */
+    src: local('Catamaran Light'), local('Catamaran-Light'),
+    url('./catamaran-v6-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+    url('./catamaran-v6-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
+    url('./catamaran-v6-latin-300.woff') format('woff'), /* Modern Browsers */
+    url('./catamaran-v6-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
+    url('./catamaran-v6-latin-300.svg#Catamaran') format('svg'); /* Legacy iOS */
+}
+/* catamaran-regular - latin */
+@font-face {
+    font-family: 'Catamaran';
+    font-style: normal;
+    font-weight: 400;
+    src: url('./catamaran-v6-latin-regular.eot'); /* IE9 Compat Modes */
+    src: local('Catamaran Regular'), local('Catamaran-Regular'),
+    url('./catamaran-v6-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+    url('./catamaran-v6-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
+    url('./catamaran-v6-latin-regular.woff') format('woff'), /* Modern Browsers */
+    url('./catamaran-v6-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
+    url('./catamaran-v6-latin-regular.svg#Catamaran') format('svg'); /* Legacy iOS */
+}
+/* catamaran-500 - latin */
+@font-face {
+    font-family: 'Catamaran';
+    font-style: normal;
+    font-weight: 500;
+    src: url('./catamaran-v6-latin-500.eot'); /* IE9 Compat Modes */
+    src: local('Catamaran Medium'), local('Catamaran-Medium'),
+    url('./catamaran-v6-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+    url('./catamaran-v6-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
+    url('./catamaran-v6-latin-500.woff') format('woff'), /* Modern Browsers */
+    url('./catamaran-v6-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
+    url('./catamaran-v6-latin-500.svg#Catamaran') format('svg'); /* Legacy iOS */
+}
+/* catamaran-700 - latin */
+@font-face {
+    font-family: 'Catamaran';
+    font-style: normal;
+    font-weight: 700;
+    src: url('./catamaran-v6-latin-700.eot'); /* IE9 Compat Modes */
+    src: local('Catamaran Bold'), local('Catamaran-Bold'),
+    url('./catamaran-v6-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+    url('./catamaran-v6-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
+    url('./catamaran-v6-latin-700.woff') format('woff'), /* Modern Browsers */
+    url('./catamaran-v6-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
+    url('./catamaran-v6-latin-700.svg#Catamaran') format('svg'); /* Legacy iOS */
+}
+/* catamaran-600 - latin */
+@font-face {
+    font-family: 'Catamaran';
+    font-style: normal;
+    font-weight: 600;
+    src: url('./catamaran-v6-latin-600.eot'); /* IE9 Compat Modes */
+    src: local('Catamaran SemiBold'), local('Catamaran-SemiBold'),
+    url('./catamaran-v6-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+    url('./catamaran-v6-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
+    url('./catamaran-v6-latin-600.woff') format('woff'), /* Modern Browsers */
+    url('./catamaran-v6-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
+    url('./catamaran-v6-latin-600.svg#Catamaran') format('svg'); /* Legacy iOS */
+}

frontend/angular/src/assets/my-career-web/fonts/montserrat/montserrat.css

+/* montserrat-200 - latin */
+@font-face {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 200;
+    src: url('./montserrat-v14-latin-200.eot'); /* IE9 Compat Modes */
+    src: local('Montserrat ExtraLight'), local('Montserrat-ExtraLight'),
+    url('./montserrat-v14-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+    url('./montserrat-v14-latin-200.woff2') format('woff2'), /* Super Modern Browsers */
+    url('./montserrat-v14-latin-200.woff') format('woff'), /* Modern Browsers */
+    url('./montserrat-v14-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */
+    url('./montserrat-v14-latin-200.svg#Montserrat') format('svg'); /* Legacy iOS */
+}
+/* montserrat-300 - latin */
+@font-face {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 300;
+    src: url('./montserrat-v14-latin-300.eot'); /* IE9 Compat Modes */
+    src: local('Montserrat Light'), local('Montserrat-Light'),
+    url('./montserrat-v14-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+    url('./montserrat-v14-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
+    url('./montserrat-v14-latin-300.woff') format('woff'), /* Modern Browsers */
+    url('./montserrat-v14-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
+    url('./montserrat-v14-latin-300.svg#Montserrat') format('svg'); /* Legacy iOS */
+}
+/* montserrat-regular - latin */
+@font-face {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 400;
+    src: url('./montserrat-v14-latin-regular.eot'); /* IE9 Compat Modes */
+    src: local('Montserrat Regular'), local('Montserrat-Regular'),
+    url('./montserrat-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+    url('./montserrat-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
+    url('./montserrat-v14-latin-regular.woff') format('woff'), /* Modern Browsers */
+    url('./montserrat-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
+    url('./montserrat-v14-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */
+}
+/* montserrat-500 - latin */
+@font-face {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 500;
+    src: url('./montserrat-v14-latin-500.eot'); /* IE9 Compat Modes */
+    src: local('Montserrat Medium'), local('Montserrat-Medium'),
+    url('./montserrat-v14-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+    url('./montserrat-v14-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
+    url('./montserrat-v14-latin-500.woff') format('woff'), /* Modern Browsers */
+    url('./montserrat-v14-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
+    url('./montserrat-v14-latin-500.svg#Montserrat') format('svg'); /* Legacy iOS */
+}
+/* montserrat-600 - latin */
+@font-face {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 600;
+    src: url('./montserrat-v14-latin-600.eot'); /* IE9 Compat Modes */
+    src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'),
+    url('./montserrat-v14-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+    url('./montserrat-v14-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
+    url('./montserrat-v14-latin-600.woff') format('woff'), /* Modern Browsers */
+    url('./montserrat-v14-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
+    url('./montserrat-v14-latin-600.svg#Montserrat') format('svg'); /* Legacy iOS */
+}
+/* montserrat-700 - latin */
+@font-face {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 700;
+    src: url('./montserrat-v14-latin-700.eot'); /* IE9 Compat Modes */
+    src: local('Montserrat Bold'), local('Montserrat-Bold'),
+    url('./montserrat-v14-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+    url('./montserrat-v14-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
+    url('./montserrat-v14-latin-700.woff') format('woff'), /* Modern Browsers */
+    url('./montserrat-v14-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
+    url('./montserrat-v14-latin-700.svg#Montserrat') format('svg'); /* Legacy iOS */
+}

frontend/angular/src/styles/my-career-styles/_flex-helpers.scss

+.dummy-class {
+    pointer-events: none;
+}
+
+.d-flex {
+    display: flex !important;
+}
+
+
 .justify-content {
 
     &-center {
@@ -9,10 +18,6 @@
     }
 }
 
-.d-flex {
-    display: flex !important;
-}
-
 
 .align-items {
 

frontend/angular/src/styles/my-career-styles/_form.scss

+@import "~styles/my-career-styles/variables";
+
 .form-group {
     margin-bottom: 21px;
 
     label {
         color: #58595B;
-        font-family: "Museo Sans Rounded", sans-serif;
+        font-family: $bodyFont;
         font-size: 14px;
         letter-spacing: 0;
         line-height: 21px;
@@ -13,6 +15,7 @@
     .form-control {
         box-sizing: border-box;
         height: 46px;
+        font-family: $bodyFont;
         background-color: #FFFFFF;
         border-radius: 4px;
         border: 2px solid #E0E0E0;

frontend/angular/src/styles/my-career-styles/_styles.scss

 .my-career-app {
 
-    @font-face {
-        font-family: 'Futura';
-        src: url('/assets/my-career-web/fonts/futura/Futura Bold font.ttf');
-    }
-}
 
-.my-career-app {
+    @import url('~assets/my-career-web/fonts/catamaran/catamaran.css');
+    @import url('~assets/my-career-web/fonts/montserrat/montserrat.css');
 
     @import "flex-helpers";
     @import "form";
@@ -14,4 +10,5 @@
     @import "primeng/radio";
     @import "primeng/checkbox";
     @import "primeng/toast";
+
 }

frontend/angular/src/styles/my-career-styles/_variables.scss

+$headingFont: 'Montserrat', sans-serif;
+$bodyFont: 'Catamaran', sans-serif,