Switch to Inter font

src/components/form/Description.module.css

@@ -0,0 +1,7 @@
+.description {
+  margin-bottom: 0.75rem;
+  word-break: break-word;
+  line-height: 1.5rem;
+  color: var(--semantic-text-neutral-subtle);
+  display: inline-block;
+}

src/components/form/Description.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import classes from 'src/components/form/Description.module.css';
 export interface IDescriptionProps {
   description: React.ReactNode;
   id: string;
@@ -11,7 +12,7 @@ export function Description(props: IDescriptionProps) {
   }
   return (
     <span
-      className='a-form-label description-label'
+      className={classes.description}
       id={`description-${props.id}`}
       data-testid={`description-${props.id}`}
     >

src/components/form/Label.module.css

@@ -0,0 +1,5 @@
+.label {
+  font-weight: 500;
+  margin-bottom: 0.75rem;
+  display: inline-block;
+}

src/components/form/Label.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { Grid } from '@material-ui/core';
 
 import { HelpTextContainer } from 'src/components/form/HelpTextContainer';
+import classes from 'src/components/form/Label.module.css';
 import { OptionalIndicator } from 'src/components/form/OptionalIndicator';
 import { RequiredIndicator } from 'src/components/form/RequiredIndicator';
 import { getPlainTextFromNode } from 'src/utils/stringHelper';
@@ -30,7 +31,7 @@ export function Label(props: IFormLabelProps) {
     >
       <Grid item={true}>
         <label
-          className='a-form-label title-label'
+          className={classes.label}
           htmlFor={props.id}
           data-testid={`label-${props.id}`}
           id={`label-${props.id}`}

src/components/message/ErrorReport.module.css

@@ -1,6 +1,7 @@
 .errorList {
   list-style-position: outside;
-  margin-left: 24px;
+  margin: 0 0 0 24px;
+  padding: 0;
 }
 
 .errorList li {

src/components/molecules/AltinnInformationPaper.tsx

@@ -13,7 +13,6 @@ const useStyles = makeStyles({
     borderRadius: 0,
     fontSize: 16,
     padding: 24,
-    fontFamily: 'Altinn-DIN',
   },
 });
 

src/components/organisms/AltinnAppHeader.module.css

@@ -3,9 +3,8 @@
 }
 
 .appBarText {
-  font-family: 'Altinn-DIN';
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
 }
 
 .container {

src/components/organisms/AltinnReceipt.tsx

@@ -156,7 +156,6 @@ export function ReceiptComponent({
               style={{
                 paddingTop: '2.562rem',
                 paddingBottom: '0.3125rem',
-                fontWeight: 600,
               }}
             >
               {titleSubmitted}

src/components/presentation/Header.module.css

@@ -0,0 +1,7 @@
+.wrapper {
+  width: 100%;
+  min-height: 84px;
+  padding: 12px;
+  padding-left: var(--modal-padding-x);
+  border-bottom: 1px solid #eee;
+}

src/components/presentation/Header.test.tsx

@@ -22,12 +22,12 @@ describe('Header', () => {
     expect(screen.getByRole('banner')).toHaveTextContent('Test Header');
   });
 
-  it('should render with success modal and custom text when process is archived', () => {
+  it('should render with custom text when process is archived', () => {
     renderWithProviders(<Header type={ProcessTaskType.Archived} />, {
       preloadedState: getInitialStateMock(),
     });
     const header = screen.getByRole('banner');
-    expect(header).toHaveClass('a-modal-background-success');
+    expect(header).toHaveTextContent('Kvittering');
   });
 
   it('should not render progress', () => {

src/components/presentation/Header.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 
+import { Heading } from '@digdir/design-system-react';
 import { Grid } from '@material-ui/core';
-import classNames from 'classnames';
 
+import classes from 'src/components/presentation/Header.module.css';
 import { Progress } from 'src/components/presentation/Progress';
 import { useAppSelector } from 'src/hooks/useAppSelector';
 import { useLanguage } from 'src/hooks/useLanguage';
@@ -21,44 +22,37 @@ export const Header = ({ type, header, appOwner }: IHeaderProps) => {
   const { lang } = useLanguage();
 
   return (
-    <header
-      className={classNames('modal-header', 'a-modal-header', {
-        'a-modal-background-success': type === ProcessTaskType.Archived,
-      })}
-    >
-      <div className='a-iconText a-iconText-background a-iconText-large'>
-        <Grid
-          container
-          direction='row'
-          justifyContent='space-between'
-          wrap='nowrap'
-          spacing={2}
-        >
+    <header className={classes.wrapper}>
+      <Grid
+        container
+        direction='row'
+        justifyContent='space-between'
+        wrap='nowrap'
+        spacing={2}
+      >
+        <Grid item>
           <Grid item>
-            <Grid item>
-              <span>{appOwner}</span>
-            </Grid>
-            <Grid item>
-              <h1 className='a-iconText-text mb-0'>
-                <span
-                  className='a-iconText-text-large'
-                  data-testid='presentation-heading'
-                >
-                  {type === ProcessTaskType.Archived ? <span>{lang('receipt.receipt')}</span> : header}
-                </span>
-              </h1>
-            </Grid>
+            <span>{appOwner}</span>
           </Grid>
-          {showProgress && (
-            <Grid
-              item
-              aria-live='polite'
+          <Grid item>
+            <Heading
+              level={1}
+              size='medium'
+              data-testid='presentation-heading'
             >
-              <Progress />
-            </Grid>
-          )}
+              {type === ProcessTaskType.Archived ? <span>{lang('receipt.receipt')}</span> : header}
+            </Heading>
+          </Grid>
         </Grid>
-      </div>
+        {showProgress && (
+          <Grid
+            item
+            aria-live='polite'
+          >
+            <Progress />
+          </Grid>
+        )}
+      </Grid>
     </header>
   );
 };

src/components/presentation/LanguageSelector.tsx

@@ -34,7 +34,7 @@ export const LanguageSelector = () => {
 
   if (appLanguages) {
     return (
-      <div style={{ minWidth: 150 }}>
+      <div style={{ minWidth: 160 }}>
         <Select
           label={langAsString('language.selector.label')}
           options={optionsMap || []}

src/components/table/AltinnTableHeader.tsx

@@ -18,7 +18,6 @@ const useStyles = makeStyles({
     '& th': {
       fontSize: '0.875rem',
       padding: padding === 'dense' ? '0 12px 4px 12px' : '0 18px 4px 36px',
-      fontFamily: 'Altinn-DIN',
       '& p': {
         fontWeight: '500',
         fontSize: '0.875rem',

src/features/pdf/PDFView.module.css

@@ -1,14 +1,5 @@
 .pdf-wrapper h1 {
-  font-size: xx-large;
-  margin-bottom: 0;
-}
-
-.title-margin {
-  margin-bottom: 1.25rem !important;
-}
-
-.pdf-wrapper p[role='doc-subtitle'] {
-  font-size: x-large;
+  margin-top: 0;
 }
 
 .component-container {

src/features/pdf/PDFView.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import cn from 'classnames';
+import { Heading } from '@digdir/design-system-react';
 
 import { ReadyForPrint } from 'src/components/ReadyForPrint';
 import { PDF_LAYOUT_NAME } from 'src/features/pdf/data/pdfSlice';
@@ -73,15 +73,13 @@ export const PDFView = ({ appName, appOwner }: PDFViewProps) => {
       id='pdfView'
       className={classes['pdf-wrapper']}
     >
-      <h1 className={cn({ [classes['title-margin']]: !appOwner })}>{appName}</h1>
-      {appOwner && (
-        <p
-          role='doc-subtitle'
-          className={classes['title-margin']}
-        >
-          {appOwner}
-        </p>
-      )}
+      {appOwner && <span role='doc-subtitle'>{appOwner}</span>}
+      <Heading
+        level={1}
+        size='large'
+      >
+        {appName}
+      </Heading>
       {pdfPage.children().map((node) => (
         <div
           key={node.item.id}

src/index.css

@@ -1,4 +1,32 @@
 @import 'src/styles/tjenester3.css';
+@import url('https://altinncdn.no/fonts/inter/inter.css');
+
+/* Font */
+:root {
+  font-family: 'Inter', sans-serif;
+  font-size: 1rem;
+  font-weight: normal;
+  line-height: 1.5;
+  text-align: left;
+  color: var(--semantic-text-neutral-default);
+}
+@supports (font-variation-settings: normal) {
+  :root {
+    font-family: 'Inter var', sans-serif;
+  }
+  * {
+    font-feature-settings: 'cv05';
+  }
+}
+
+/* Override design system variables */
+* {
+  --component-panel-font_size-header-breakpoint_sm: 1.4rem;
+  --component-panel-font_size-header-breakpoint_md: 1.6rem;
+  --component-panel-font_size-header-breakpoint_lg: 1.75rem;
+  --component-panel-font_size-body-breakpoint_md: 1rem;
+  --component-panel-font_weight-heading: 500;
+}
 
 /* Global variables */
 :root {
@@ -83,21 +111,6 @@ input:focus + .slider {
   box-shadow: 0 0 1px #1eaef7;
 }
 
-p {
-  font-family: 'Altinn-DIN';
-}
-
-h2 {
-  font-size: 22px;
-  font-weight: normal;
-}
-
-@media only screen and (min-width: 576px) {
-  h2 {
-    font-size: 28px;
-  }
-}
-
 option {
   overflow: 'hidden';
   text-overflow: 'ellipsis';

src/language/sharedLanguage.ts

@@ -1,8 +1,11 @@
+import React from 'react';
+
+import { Heading } from '@digdir/design-system-react';
 import DOMPurify from 'dompurify';
-import parseHtmlToReact from 'html-react-parser';
+import parseHtmlToReact, { domToReact } from 'html-react-parser';
 import { marked } from 'marked';
 import { mangle } from 'marked-mangle';
-import type { HTMLReactParserOptions } from 'html-react-parser';
+import type { DOMNode, Element, HTMLReactParserOptions } from 'html-react-parser';
 
 import type { IUseLanguage } from 'src/hooks/useLanguage';
 import type { IAltinnOrgs, IApplication, IDataSources, ITextResource } from 'src/types/shared';
@@ -51,17 +54,47 @@ export const getParsedLanguageFromText = (
   }
 
   const clean = DOMPurify.sanitize(dirty, actualOptions);
-  return parseHtmlToReact(clean.toString().trim(), inline ? parseOptions : undefined);
+  return parseHtmlToReact(clean.toString().trim(), getParseOptions(inline));
 };
 
-export const parseOptions: HTMLReactParserOptions = {
-  replace: (domNode) => {
-    replaceRootTag(domNode);
-  },
-};
+function getParseOptions(inline = true): HTMLReactParserOptions {
+  return {
+    replace: (domNode) => {
+      if (inline) {
+        replaceRootTag(domNode);
+      }
+      return replaceElements(domNode, getParseOptions(inline));
+    },
+  };
+}
+
+function isElement(node: DOMNode): node is Element {
+  return node.type === 'tag';
+}
+
+function replaceElements(domNode: DOMNode, parserOptions: HTMLReactParserOptions) {
+  if (isElement(domNode) && domNode.name === 'h1') {
+    return React.createElement(Heading, { level: 1, size: 'large' }, domToReact(domNode.children, parserOptions));
+  }
+  if (isElement(domNode) && domNode.name === 'h2') {
+    return React.createElement(Heading, { level: 2, size: 'medium' }, domToReact(domNode.children, parserOptions));
+  }
+  if (isElement(domNode) && domNode.name === 'h3') {
+    return React.createElement(Heading, { level: 3, size: 'small' }, domToReact(domNode.children, parserOptions));
+  }
+  if (isElement(domNode) && domNode.name === 'h4') {
+    return React.createElement(Heading, { level: 4, size: 'xsmall' }, domToReact(domNode.children, parserOptions));
+  }
+  if (isElement(domNode) && domNode.name === 'h5') {
+    return React.createElement(Heading, { level: 5, size: 'xsmall' }, domToReact(domNode.children, parserOptions));
+  }
+  if (isElement(domNode) && domNode.name === 'h6') {
+    return React.createElement(Heading, { level: 6, size: 'xsmall' }, domToReact(domNode.children, parserOptions));
+  }
+}
 
-const replaceRootTag = (domNode: any) => {
-  if (!domNode.parent && domNode.type === 'tag' && domNode.name === 'p') {
+const replaceRootTag = (domNode: DOMNode) => {
+  if (isElement(domNode) && !domNode.parent && domNode.name === 'p') {
     // The root element from the `marked.parse` will in many cases result in a `p` tag, which is not what we want,
     // since the text might already be used in f.ex `p`, `button`, `label` tags etc.
     // Span is a better solution, although not perfect, as block level elements are not valid children (f.ex h1), but this should be less frequent.

src/layout/Datepicker/DatepickerComponent.tsx

@@ -26,7 +26,7 @@ const useStyles = makeStyles(() => ({
     boxSizing: 'border-box',
     height: '36px',
     fontSize: '1rem',
-    fontFamily: 'Altinn-DIN',
+    fontFamily: 'inherit',
     borderRadius: 'var(--interactive_components-border_radius-normal)',
     marginBottom: '0px',
     outline: '1px solid var(--component-input-color-border-default)',
@@ -73,7 +73,7 @@ const useStyles = makeStyles(() => ({
   },
   dialog: {
     '& *': {
-      fontFamily: 'Altinn-DIN',
+      fontFamily: 'inherit',
     },
     '& .MuiTypography-h4': {
       fontSize: '1.5rem',