feat: host fonts in the public directory

packages/dnb-design-system-portal/gatsby-node.js

@@ -3,6 +3,7 @@
  *
  */
 
+const fs = require('fs').promises
 const path = require('path')
 const { isCI } = require('repo-utils')
 const { init } = require('./scripts/version.js')
@@ -118,6 +119,15 @@ exports.createPages = async (params) => {
   await createRedirects(params)
 }
 
+exports.onPreBootstrap = async (params) => {
+  // Copy the fonts folder
+  const { program } = params.store.getState()
+  const publicDir = path.join(program.directory, 'public', 'fonts')
+  const rootPath = path.dirname(require.resolve('@dnb/eufemia'))
+  const src = path.resolve(rootPath, 'assets', 'fonts')
+  await copyDirectory(src, publicDir)
+}
+
 exports.onPostBuild = async (params) => {
   await createRedirects(params)
 
@@ -312,3 +322,20 @@ exports.onCreateDevServer = (params) => {
     )
   }
 }
+
+async function copyDirectory(src, dest) {
+  await fs.mkdir(dest, { recursive: true })
+
+  const entries = await fs.readdir(src, { withFileTypes: true })
+
+  for await (const entry of entries) {
+    const srcPath = path.join(src, entry.name)
+    const destPath = path.join(dest, entry.name)
+
+    if (entry.isDirectory()) {
+      await copyDirectory(srcPath, destPath)
+    } else {
+      await fs.copyFile(srcPath, destPath)
+    }
+  }
+}

packages/dnb-design-system-portal/playwright.config.ts

@@ -1,4 +1,5 @@
 import { defineConfig } from '@playwright/test'
+import { isCI } from 'repo-utils'
 
 export default defineConfig({
   timeout: 30000,
@@ -8,7 +9,7 @@ export default defineConfig({
 
   use: {
     // Base URL to use in actions like `await page.goto('/')`.
-    baseURL: 'http://localhost:8002',
+    baseURL: isCI ? 'http://localhost:8002' : 'http://localhost:8000',
 
     // Name of the browser that runs tests. For example `chromium`, `firefox`, `webkit`.
     browserName: 'firefox',

packages/dnb-design-system-portal/src/docs/contribute/getting-started/make-and-run-tests.mdx

@@ -77,7 +77,11 @@ yarn start
 yarn test:e2e /Slider\|Button/
 
 # You can also start it in watch mode
-yarn test:e2e:watch /Slider\|Button/
+yarn test:e2e:watch
+
+# Or run the tests for the portal
+yarn test:e2e:portal
+yarn test:e2e:portal:watch
 ```
 
 Playwright uses this naming convention: `/__tests__/{ComponentName}.screenshot.test.ts`

packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/typographic-rules.mdx

@@ -1,11 +1,12 @@
 <VisibilityByTheme hidden="sbanken">
+
 ## In General
 
 The default font for all web applications is the `DNB` font.
 
 ### Download DNB font family
 
-You can download the [DNB font files as a ZIP package](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-eufemia/assets/fonts/dnb/DNB.zip?raw=true) **Last update: November 8, 2020**.
+You can download the [DNB font files as a ZIP package](https://github.com/dnbexperience/eufemia/raw/refs/heads/main/packages/dnb-eufemia/assets/fonts/dnb/DNB.zip) **Last update: November 8, 2020**.
 
 If you get access to Figma **Eufemia Web** main file, then you don't need to install the DNB font. Figma will provide the font automatically for you inside Figma. If you use other designer tools, make sure it is installed on your system so you can use the design resources.
 
@@ -16,7 +17,9 @@ The Eufemia typographic scale is as follows:
 _16px, 18px, 20px, 26px, 34px, 48px_
 
 </VisibilityByTheme>
+
 <VisibilityByTheme visible="sbanken">
+
 ## In general
 
 Sbanken has two fonts in its profile; Roboto and Maison Neue. The latter is used mainly for headlines,

packages/dnb-design-system-portal/src/docs/uilib/typography.mdx

@@ -73,3 +73,23 @@ Use it either by a CSS class `.dnb-t__family--monospace` or define your own like
   font-style: normal;
 }
 ```
+
+## Hosted Fonts
+
+The font files are hosted under the following URLs:
+
+### DNB
+
+- https://eufemia.dnb.no/fonts/dnb/DNB-Regular.woff2
+- https://eufemia.dnb.no/fonts/dnb/DNB-Medium.woff2
+- https://eufemia.dnb.no/fonts/dnb/DNB-Bold.woff2
+- https://eufemia.dnb.no/fonts/dnb/DNBMono-Regular.woff2
+- https://eufemia.dnb.no/fonts/dnb/DNBMono-Medium.woff2
+- https://eufemia.dnb.no/fonts/dnb/DNBMono-Bold.woff2
+
+### Sbanken
+
+- https://eufemia.dnb.no/fonts/sbanken/MaisonNeue.woff2
+- https://eufemia.dnb.no/fonts/sbanken/Roboto-Regular.woff2
+- https://eufemia.dnb.no/fonts/sbanken/Roboto-Medium.woff2
+- https://eufemia.dnb.no/fonts/sbanken/Roboto-Bold.woff2

packages/dnb-eufemia/playwright.config.ts

@@ -1,15 +1,16 @@
 import { defineConfig } from '@playwright/test'
+import { isCI } from 'repo-utils'
 
 export default defineConfig({
   timeout: 30000,
   globalTimeout: 600000,
   reporter: 'list',
   testDir: './src/',
-  testMatch: '*__tests__/*.spec.ts',
+  testMatch: '*__tests__/**/*.spec.ts',
 
   use: {
     // Base URL to use in actions like `await page.goto('/')`.
-    baseURL: 'http://localhost:8001',
+    baseURL: isCI ? 'http://localhost:8001' : 'http://localhost:8000',
 
     // Name of the browser that runs tests. For example `chromium`, `firefox`, `webkit`.
     browserName: 'firefox',

packages/dnb-eufemia/src/__tests__/e2e/Fonts.e2e.spec.ts

@@ -0,0 +1,32 @@
+import { test, expect } from '@playwright/test'
+
+test.describe('Fonts', () => {
+  test('verify fonts are served correctly', async ({ page }) => {
+    const fonts = [
+      // DNB
+      'dnb/DNB-Regular.woff2',
+      'dnb/DNB-Medium.woff2',
+      'dnb/DNB-Bold.woff2',
+      'dnb/DNBMono-Regular.woff2',
+      'dnb/DNBMono-Medium.woff2',
+      'dnb/DNBMono-Bold.woff2',
+      'dnb/skeleton/DNB-Skeleton-Regular.woff2',
+      'dnb/skeleton/DNB-Skeleton-Medium.woff2',
+      'dnb/skeleton/DNB-Skeleton-Bold.woff2',
+
+      // Sbanken
+      'sbanken/MaisonNeue.woff2',
+      'sbanken/Roboto-Regular.woff2',
+      'sbanken/Roboto-Medium.woff2',
+      'sbanken/Roboto-Bold.woff2',
+    ]
+
+    for await (const font of fonts) {
+      const url = `/fonts/${font}`
+      const response = await page.request.get(url)
+      console.log('response', response)
+      expect(response.status()).toBe(200)
+      expect(response.headers()['content-type']).toContain('font') // Ensure it's a font file
+    }
+  })
+})

packages/dnb-design-system-portal/src/e2e/typography.spec.ts → packages/dnb-eufemia/src/__tests__/e2e/Typography.e2e.spec.ts

@@ -12,7 +12,7 @@ test.afterEach(async ({ page }) => {
 test.describe('Typography for UI', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto(
-      '/quickguide-designer/fonts?data-visual-test&eufemia-theme=ui',
+      '/quickguide-designer/fonts?data-visual-test&eufemia-theme=ui'
     )
 
     // Check if app is mounted
@@ -99,7 +99,7 @@ test.describe('Typography for UI', () => {
 test.describe('Typography for Sbanken', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto(
-      '/quickguide-designer/fonts?data-visual-test&eufemia-theme=sbanken',
+      '/quickguide-designer/fonts?data-visual-test&eufemia-theme=sbanken'
     )
 
     // Check if app is mounted
@@ -166,7 +166,7 @@ test.describe('Typography for Sbanken', () => {
       '.typography-box > .dnb-t__weight--medium',
       {
         state: 'attached',
-      },
+      }
     )
     const element = page
       .locator('.typography-box > .dnb-t__weight--medium')