fix: Self-host fonts (#6371)

* feat: Add local font-files + CSS

* perf: Reduce number of font-files to load

* fix: Remove workaround to allow Google Fonts

.github/workflows/deploy_staging_portalicious.yml

@@ -26,7 +26,6 @@ jobs:
       NG_LOCALES: 'en-GB,nl'
       NG_DEFAULT_LOCALE: 'en-GB'
       NG_URL_121_SERVICE_API: 'https://staging.121.global/api'
-      USE_GOOGLE_FONTS: 'for-now'
       USE_IN_TWILIO_FLEX_IFRAME: ${{ vars.USE_IN_TWILIO_FLEX_IFRAME }}
       USE_POWERBI_DASHBOARDS: ${{ vars.USE_POWERBI_DASHBOARDS }}
       USE_SSO_AZURE_ENTRA: ${{ vars.USE_SSO_AZURE_ENTRA }}

.github/workflows/deploy_test_portalicious.yml

@@ -42,7 +42,6 @@ jobs:
       NG_LOCALES: 'en-GB,nl'
       NG_DEFAULT_LOCALE: 'en-GB'
       NG_URL_121_SERVICE_API: 'https://test.121.global/api'
-      USE_GOOGLE_FONTS: 'for-now'
       USE_IN_TWILIO_FLEX_IFRAME: ${{ vars.USE_IN_TWILIO_FLEX_IFRAME }}
       USE_POWERBI_DASHBOARDS: ${{ vars.USE_POWERBI_DASHBOARDS }}
       USE_SSO_AZURE_ENTRA: ${{ vars.USE_SSO_AZURE_ENTRA }}

interfaces/Portalicious/_build-deployment-configuration.mjs

@@ -105,22 +105,6 @@ if (process.env.USE_POWERBI_DASHBOARDS === 'true') {
   ]);
 }
 
-// Feature: Google Fonts (TODO: To Be Removed before launch! AB#31610)
-if (process.env.USE_GOOGLE_FONTS === 'for-now') {
-  console.info('✅ Allow loading Google Fonts');
-
-  let styleSrc = contentSecurityPolicy.get('style-src');
-  contentSecurityPolicy.set('style-src', [
-    ...styleSrc,
-    `https://fonts.googleapis.com`,
-  ]);
-
-  contentSecurityPolicy.set('font-src', [
-    `'self'`,
-    `https://fonts.gstatic.com`,
-  ]);
-}
-
 // Construct the Content-Security-Policy header-value
 const contentSecurityPolicyValue = Array.from(contentSecurityPolicy)
   .map((directive) => {

interfaces/Portalicious/angular.json

@@ -42,7 +42,7 @@
               },
               "src/favicon.ico"
             ],
-            "styles": ["src/styles.scss"],
+            "styles": ["src/fonts.css", "src/styles.scss"],
             "scripts": []
           },
           "configurations": {

interfaces/Portalicious/src/fonts.css

@@ -0,0 +1,117 @@
+/**
+ * Generated using: https://gwfh.mranftl.com/fonts
+ *
+ * Only load files that are actually in use,
+ * Uncomment only the lines of these font-variant(s).
+ *
+ */
+
+/***********************************************
+ * Montserrat
+ ***********************************************/
+
+/* @font-face { font-display: swap; font-family: 'Montserrat'; font-style: normal; font-weight: 100; src: url('assets/fonts//montserrat-v29-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-100.woff2') format('woff2'); } */
+/* @font-face { font-display: swap; font-family: 'Montserrat'; font-style: italic; font-weight: 100; src: url('assets/fonts//montserrat-v29-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-100italic.woff2') format('woff2'); } */
+/* @font-face { font-display: swap; font-family: 'Montserrat'; font-style: normal; font-weight: 200; src: url('assets/fonts//montserrat-v29-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-200.woff2') format('woff2'); } */
+/* @font-face { font-display: swap; font-family: 'Montserrat'; font-style: italic; font-weight: 200; src: url('assets/fonts//montserrat-v29-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-200italic.woff2') format('woff2'); } */
+/* @font-face { font-display: swap; font-family: 'Montserrat'; font-style: normal; font-weight: 300; src: url('assets/fonts//montserrat-v29-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-300.woff2') format('woff2'); } */
+/* @font-face { font-display: swap; font-family: 'Montserrat'; font-style: italic; font-weight: 300; src: url('assets/fonts//montserrat-v29-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-300italic.woff2') format('woff2'); } */
+@font-face {
+  font-display: swap;
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 400;
+  src: url('assets/fonts//montserrat-v29-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-regular.woff2')
+    format('woff2');
+}
+@font-face {
+  font-display: swap;
+  font-family: 'Montserrat';
+  font-style: italic;
+  font-weight: 400;
+  src: url('assets/fonts//montserrat-v29-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-italic.woff2')
+    format('woff2');
+}
+@font-face {
+  font-display: swap;
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 500;
+  src: url('assets/fonts//montserrat-v29-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-500.woff2')
+    format('woff2');
+}
+@font-face {
+  font-display: swap;
+  font-family: 'Montserrat';
+  font-style: italic;
+  font-weight: 500;
+  src: url('assets/fonts//montserrat-v29-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-500italic.woff2')
+    format('woff2');
+}
+/* @font-face { font-display: swap; font-family: 'Montserrat'; font-style: normal; font-weight: 600; src: url('assets/fonts//montserrat-v29-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-600.woff2') format('woff2'); } */
+/* @font-face { font-display: swap; font-family: 'Montserrat'; font-style: italic; font-weight: 600; src: url('assets/fonts//montserrat-v29-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-600italic.woff2') format('woff2'); } */
+@font-face {
+  font-display: swap;
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 700;
+  src: url('assets/fonts//montserrat-v29-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-700.woff2')
+    format('woff2');
+}
+@font-face {
+  font-display: swap;
+  font-family: 'Montserrat';
+  font-style: italic;
+  font-weight: 700;
+  src: url('assets/fonts//montserrat-v29-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-700italic.woff2')
+    format('woff2');
+}
+/* @font-face { font-display: swap; font-family: 'Montserrat'; font-style: normal; font-weight: 800; src: url('assets/fonts//montserrat-v29-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-800.woff2') format('woff2'); } */
+/* @font-face { font-display: swap; font-family: 'Montserrat'; font-style: italic; font-weight: 800; src: url('assets/fonts//montserrat-v29-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-800italic.woff2') format('woff2'); } */
+/* @font-face { font-display: swap; font-family: 'Montserrat'; font-style: normal; font-weight: 900; src: url('assets/fonts//montserrat-v29-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-900.woff2') format('woff2'); } */
+/* @font-face { font-display: swap; font-family: 'Montserrat'; font-style: italic; font-weight: 900; src: url('assets/fonts//montserrat-v29-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-900italic.woff2') format('woff2'); } */
+
+/***********************************************
+ * Open Sans
+ ***********************************************/
+
+/* @font-face { font-display: swap; font-family: 'Open Sans'; font-style: normal; font-weight: 300; src: url('assets/fonts//open-sans-v40-cyrillic_cyrillic-ext_greek_greek-ext_hebrew_latin_latin-ext_math_symbols_vietnamese-300.woff2') format('woff2'); } */
+/* @font-face { font-display: swap; font-family: 'Open Sans'; font-style: italic; font-weight: 300; src: url('assets/fonts//open-sans-v40-cyrillic_cyrillic-ext_greek_greek-ext_hebrew_latin_latin-ext_math_symbols_vietnamese-300italic.woff2') format('woff2'); } */
+@font-face {
+  font-display: swap;
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: url('assets/fonts//open-sans-v40-cyrillic_cyrillic-ext_greek_greek-ext_hebrew_latin_latin-ext_math_symbols_vietnamese-regular.woff2')
+    format('woff2');
+}
+@font-face {
+  font-display: swap;
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 400;
+  src: url('assets/fonts//open-sans-v40-cyrillic_cyrillic-ext_greek_greek-ext_hebrew_latin_latin-ext_math_symbols_vietnamese-italic.woff2')
+    format('woff2');
+}
+/* @font-face { font-display: swap; font-family: 'Open Sans'; font-style: normal; font-weight: 500; src: url('assets/fonts//open-sans-v40-cyrillic_cyrillic-ext_greek_greek-ext_hebrew_latin_latin-ext_math_symbols_vietnamese-500.woff2') format('woff2'); } */
+/* @font-face { font-display: swap; font-family: 'Open Sans'; font-style: italic; font-weight: 500; src: url('assets/fonts//open-sans-v40-cyrillic_cyrillic-ext_greek_greek-ext_hebrew_latin_latin-ext_math_symbols_vietnamese-500italic.woff2') format('woff2'); } */
+@font-face {
+  font-display: swap;
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 600;
+  src: url('assets/fonts//open-sans-v40-cyrillic_cyrillic-ext_greek_greek-ext_hebrew_latin_latin-ext_math_symbols_vietnamese-600.woff2')
+    format('woff2');
+}
+@font-face {
+  font-display: swap;
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 600;
+  src: url('assets/fonts//open-sans-v40-cyrillic_cyrillic-ext_greek_greek-ext_hebrew_latin_latin-ext_math_symbols_vietnamese-600italic.woff2')
+    format('woff2');
+}
+/* @font-face { font-display: swap; font-family: 'Open Sans'; font-style: normal; font-weight: 700; src: url('assets/fonts//open-sans-v40-cyrillic_cyrillic-ext_greek_greek-ext_hebrew_latin_latin-ext_math_symbols_vietnamese-700.woff2') format('woff2'); } */
+/* @font-face { font-display: swap; font-family: 'Open Sans'; font-style: italic; font-weight: 700; src: url('assets/fonts//open-sans-v40-cyrillic_cyrillic-ext_greek_greek-ext_hebrew_latin_latin-ext_math_symbols_vietnamese-700italic.woff2') format('woff2'); } */
+/* @font-face { font-display: swap; font-family: 'Open Sans'; font-style: normal; font-weight: 800; src: url('assets/fonts//open-sans-v40-cyrillic_cyrillic-ext_greek_greek-ext_hebrew_latin_latin-ext_math_symbols_vietnamese-800.woff2') format('woff2'); } */
+/* @font-face { font-display: swap; font-family: 'Open Sans'; font-style: italic; font-weight: 800; src: url('assets/fonts//open-sans-v40-cyrillic_cyrillic-ext_greek_greek-ext_hebrew_latin_latin-ext_math_symbols_vietnamese-800italic.woff2') format('woff2'); } */

interfaces/Portalicious/src/index.html

@@ -13,19 +13,6 @@
       type="image/x-icon"
       href="assets/favicon.ico"
     />
-    <link
-      rel="preconnect"
-      href="https://fonts.googleapis.com"
-    />
-    <link
-      rel="preconnect"
-      href="https://fonts.gstatic.com"
-      crossorigin
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
-      rel="stylesheet"
-    />
   </head>
   <body>
     <app-root></app-root>

interfaces/Portalicious/tailwind.config.ts

@@ -10,6 +10,7 @@ export default {
       center: true,
     },
     fontFamily: {
+      // See loading of font-files in: src/fonts.css
       display: ['Montserrat', 'sans-serif'],
       body: ['"Open Sans"', 'sans-serif'],
       mono: ['monospace'],