From 900b6de5542a769429499d8e5996e8a30a144553 Mon Sep 17 00:00:00 2001 From: dreizwo Date: Thu, 8 May 2025 11:39:15 +0200 Subject: [PATCH] add head font face and styles for build to _app.tsx --- apps/tax-e2e/src/example.spec.ts | 2 +- apps/tax/pages/_app.tsx | 20 +++++++++++- apps/tax/styles/font.css.ts | 55 ++++++++++++++++++++++++++++++++ 3 files changed, 75 insertions(+), 2 deletions(-) create mode 100644 apps/tax/styles/font.css.ts diff --git a/apps/tax-e2e/src/example.spec.ts b/apps/tax-e2e/src/example.spec.ts index 4bbdd7c6..5599dba6 100644 --- a/apps/tax-e2e/src/example.spec.ts +++ b/apps/tax-e2e/src/example.spec.ts @@ -4,5 +4,5 @@ test('has title', async ({ page }) => { await page.goto('/') // Expect h1 to contain a substring. - expect(await page.locator('h1').innerText()).toContain('Welcome') + expect(await page.locator('h1').innerText()).toContain('Skil á framtali') }) diff --git a/apps/tax/pages/_app.tsx b/apps/tax/pages/_app.tsx index 17938b02..2e4364ef 100644 --- a/apps/tax/pages/_app.tsx +++ b/apps/tax/pages/_app.tsx @@ -1,8 +1,12 @@ import React, { FC } from 'react' + +import { fontStyles } from '../styles/font.css'; + import Head from 'next/head' import { useRouter } from 'next/router' import { Header } from '@island.is/tax/components' +import {PRELOADED_FONTS} from "@island.is/tax/constants"; const Layout: FC> = ({ children }) => { const router = useRouter() @@ -12,6 +16,20 @@ const Layout: FC> = ({ children }) => {
Ísland.is + {PRELOADED_FONTS.map((href, index) => { + return ( + + ) + + })} + {!hideHeader &&
} {children} @@ -27,4 +45,4 @@ const SupportApplication: any = ({ Component, pageProps }) => { ) } -export default SupportApplication \ No newline at end of file +export default SupportApplication diff --git a/apps/tax/styles/font.css.ts b/apps/tax/styles/font.css.ts new file mode 100644 index 00000000..b3ac9084 --- /dev/null +++ b/apps/tax/styles/font.css.ts @@ -0,0 +1,55 @@ +export const fontStyles = ` + @font-face { + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 300; + font-display: swap; + src: local('IBM Plex Sans Light'), local('IBMPlexSans-Light'), + url('/fonts/ibm-plex-sans-v7-latin-300.woff2') format('woff2'), + url('/fonts/ibm-plex-sans-v7-latin-300.woff') format('woff'); + } + + @font-face { + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('IBM Plex Sans'), local('IBMPlexSans'), + url('/fonts/ibm-plex-sans-v7-latin-regular.woff2') format('woff2'), + url('/fonts/ibm-plex-sans-v7-latin-regular.woff') format('woff'); + } + + @font-face { + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: local('IBM Plex Sans Italic'), local('IBMPlexSans-Italic'), + url('/fonts/ibm-plex-sans-v7-latin-italic.woff2') format('woff2'), + url('/fonts/ibm-plex-sans-v7-latin-italic.woff') format('woff'); + } + + @font-face { + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 500; + font-display: swap; + src: local('IBM Plex Sans Medium'), local('IBMPlexSans-Medium'), + url('/fonts/ibm-plex-sans-v7-latin-500.woff2') format('woff2'), + url('/fonts/ibm-plex-sans-v7-latin-500.woff') format('woff'); + } + + @font-face { + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 600; + font-display: swap; + src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'), + url('/fonts/ibm-plex-sans-v7-latin-600.woff2') format('woff2'), + url('/fonts/ibm-plex-sans-v7-latin-600.woff') format('woff'); + } + + body { + font-family: 'IBM Plex Sans', sans-serif; + } +`;