diff --git a/src/frontend/panda.config.ts b/src/frontend/panda.config.ts index 80a0af93..ed740179 100644 --- a/src/frontend/panda.config.ts +++ b/src/frontend/panda.config.ts @@ -35,40 +35,7 @@ const config: Config = { exclude: [], jsxFramework: 'react', outdir: 'src/styled-system', - globalFontface: { - Marianne: [ - { - src: 'url(/fonts/Marianne-Regular-subset.woff2) format("woff2")', - fontWeight: 400, - fontStyle: 'normal', - fontDisplay: 'swap', - }, - { - path: 'url(/fonts/Marianne-Regular_Italic-subset.woff2) format("woff2")', - fontWeight: 400, - fontStyle: 'italic', - fontDisplay: 'swap', - }, - { - path: 'url(/fonts/Marianne-Medium-subset.woff2) format("woff2")', - fontWeight: 500, - fontStyle: 'normal', - fontDisplay: 'swap', - }, - { - path: 'url(/fonts/Marianne-Bold-subset.woff2) format("woff2")', - fontWeight: 700, - fontStyle: 'normal', - fontDisplay: 'swap', - }, - { - path: 'url(/fonts/Marianne-ExtraBold-subset.woff2) format("woff2")', - fontWeight: 800, - fontStyle: 'normal', - fontDisplay: 'swap', - }, - ], - }, + globalFontface: {}, theme: { ...pandaPreset.theme, // media queries are defined in em so that zooming with text-only mode triggers breakpoints diff --git a/src/frontend/src/styles/fonts.css b/src/frontend/src/styles/fonts.css index 5af0abc7..e821d226 100644 --- a/src/frontend/src/styles/fonts.css +++ b/src/frontend/src/styles/fonts.css @@ -30,6 +30,46 @@ font-display: swap; } +@font-face { + font-family: 'Marianne'; + src: url('/fonts/Marianne-Regular-subset.woff2') format('woff2'); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Marianne'; + src: url('/fonts/Marianne-Regular_Italic-subset.woff2') format('woff2'); + font-weight: 400; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: 'Marianne'; + src: url('/fonts/Marianne-Medium-subset.woff2') format('woff2'); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Marianne'; + src: url('/fonts/Marianne-Bold-subset.woff2') format('woff2'); + font-weight: 700; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Marianne'; + src: url('/fonts/Marianne-ExtraBold-subset.woff2') format('woff2'); + font-weight: 800; + font-style: normal; + font-display: swap; +} + /* * to reduce CLS * values taken from https://github.com/khempenius/font-fallbacks-dataset/blob/main/font-metric-overrides.csv#L2979