Oppsett font (utvikler)

Guide på hvordan du kan sette opp riktig font som utvikler.

Oppsett

Du må først få tak i riktige font-filer. Send en melding til Fredrik Matheson for å få tilgang til disse.

Legg så filene i en mappe "fonts" i "public"-mappa.

font-face

@font-face brukes for å definere hvilke fonter som skal brukes når. I en CSS-fil definerer du når en font-fil skal brukes, for eksempel for italic eller for bold, eller kombinasjoner.

// styles.css
@font-face {
  font-family: 'GT Planar';
  src: url('../../public/fonts/GT-Planar-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'GT Planar';
  src: url('../../public/fonts/GT-Planar-Italic-15-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: 'GT Planar';
  src: url('../../public/fonts/GT-Planar-Italic-30-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: oblique 30deg;
}

@font-face {
  font-family: 'GT Planar';
  src: url('../../public/fonts/GT-Planar-Retalic-15-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: oblique -15deg;
}

@font-face {
  font-family: 'GT Planar';
  src: url('../../public/fonts/GT-Planar-Retalic-30-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: oblique -30deg;
}

@font-face {
  font-family: 'GT Planar';
  src: url('../../public/fonts/GT-Planar-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'GT Planar';
  src: url('../../public/fonts/GT-Planar-Italic-15-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'GT Planar';
  src: url('../../public/fonts/GT-Planar-Italic-30-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: oblique 30deg;
}

@font-face {
  font-family: 'GT Planar';
  src: url('../../public/fonts/GT-Planar-Retalic-15-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: oblique -15deg;
}

@font-face {
  font-family: 'GT Planar';
  src: url('../../public/fonts/GT-Planar-Retalic-30-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: oblique -30deg;
}

@font-face {
  font-family: 'GT Planar';
  src: url('../../public/fonts/GT-Planar-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'GT Planar';
  src: url('../../public/fonts/GT-Planar-Italic-15-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: 'GT Planar';
  src: url('../../public/fonts/GT-Planar-Italic-30-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: oblique 30deg;
}

@font-face {
  font-family: 'GT Planar';
  src: url('../../public/fonts/GT-Planar-Retalic-15-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: oblique -15deg;
}

@font-face {
  font-family: 'GT Planar';
  src: url('../../public/fonts/GT-Planar-Retalic-30-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: oblique -30deg;
}

@font-face {
  font-family: 'GT Planar';
  src: url('../../public/fonts/GT-Planar-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'GT Planar';
  src: url('../../public/fonts/GT-Planar-Italic-15-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: 'GT Planar';
  src: url('../../public/fonts/GT-Planar-Italic-30-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: oblique 30deg;
}

@font-face {
  font-family: 'GT Planar';
  src: url('../../public/fonts/GT-Planar-Retalic-15-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: oblique -15deg;
}

@font-face {
  font-family: 'GT Planar';
  src: url('../../public/fonts/GT-Planar-Retalic-30-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: oblique -30deg;
}

Du må så definere font-family i body. Da arves fonten nedover i andre elementer:

// styles.css
body {
  font-family: 'GT Planar', sans-serif;
}

For bedre ytelse, kan du i Next App Router lage en font definitions file. Du kan så gi fonten et navn, som kan kalles ved bruk av CSS-variabel.

// fonts.ts
const gtPlanar = localFont({
  src: [
    // Light
    {
      path: "../../public/fonts/GT-Planar-Light.woff2",
      weight: "300",
      style: "normal"
    },
    {
      path: "../../public/fonts/GT-Planar-Italic-15-Light.woff2",
      weight: "300",
      style: "italic"
    },
    {
      path: "../../public/fonts/GT-Planar-Italic-30-Light.woff2",
      weight: "300",
      style: "oblique 30deg"
    },
    {
      path: "../../public/fonts/GT-Planar-Retalic-15-Light.woff2",
      weight: "300",
      style: "oblique -15deg"
    },
    {
      path: "../../public/fonts/GT-Planar-Retalic-30-Light.woff2",
      weight: "300",
      style: "oblique -30deg"
    },

    // Regular
    {
      path: "../../public/fonts/GT-Planar-Regular.woff2",
      weight: "400",
      style: "normal"
    },
    {
      path: "../../public/fonts/GT-Planar-Italic-15-Regular.woff2",
      weight: "400",
      style: "italic"
    },
    {
      path: "../../public/fonts/GT-Planar-Italic-30-Regular.woff2",
      weight: "400",
      style: "oblique 30deg"
    },
    {
      path: "../../public/fonts/GT-Planar-Retalic-15-Regular.woff2",
      weight: "400",
      style: "oblique -15deg"
    },
    {
      path: "../../public/fonts/GT-Planar-Retalic-30-Regular.woff2",
      weight: "400",
      style: "oblique -30deg"
    },

    // Medium
    {
      path: "../../public/fonts/GT-Planar-Medium.woff2",
      weight: "500",
      style: "normal"
    },
    {
      path: "../../public/fonts/GT-Planar-Italic-15-Medium.woff2",
      weight: "500",
      style: "italic"
    },
    {
      path: "../../public/fonts/GT-Planar-Italic-30-Medium.woff2",
      weight: "500",
      style: "oblique 30deg"
    },
    {
      path: "../../public/fonts/GT-Planar-Retalic-15-Medium.woff2",
      weight: "500",
      style: "oblique -15deg"
    },
    {
      path: "../../public/fonts/GT-Planar-Retalic-30-Medium.woff2",
      weight: "500",
      style: "oblique -30deg"
    },

    // Bold
    {
      path: "../../public/fonts/GT-Planar-Bold.woff2",
      weight: "700",
      style: "normal"
    },
    {
      path: "../../public/fonts/GT-Planar-Italic-15-Bold.woff2",
      weight: "700",
      style: "italic"
    },
    {
      path: "../../public/fonts/GT-Planar-Italic-30-Bold.woff2",
      weight: "700",
      style: "oblique 30deg"
    },
    {
      path: "../../public/fonts/GT-Planar-Retalic-15-Bold.woff2",
      weight: "700",
      style: "oblique -15deg"
    },
    {
      path: "../../public/fonts/GT-Planar-Retalic-30-Bold.woff2",
      weight: "700",
      style: "oblique -30deg"
    }
  ],
  variable: "--font-gt-planar"
});

Du kan så bruke fontvariabelen i styling:

// styles.css
body {
  font-family: var(--font-gt-planar), sans-serif;
}

Hvordan ta det i bruk?

Font-styles variasjonene er normal, italic, og ulike grader av oblique. Du vil nok hovedsakelig bruke normal og italic.

Oblique-variasjonene er for å sette en ekstra aksent, som f.eks. hvor oblique-30 brukes for hovedoverskrift.

Av font-weights brukes light, regular, medium og bold.

Her er noen eksempler:

<>
  <p style={{fontStyle: "oblique -30deg"}}>Her er en tekst (retalic-30)</p>
  <p style={{fontStyle: "oblique -15deg"}}>Her er en tekst (retalic-15)</p>
  <p>Her er en tekst</p>
  <p style={{fontStyle: "italic"}}>Her er en tekst (italic-15)</p>
  <p style={{fontStyle: "oblique 30deg"}}>Her er en tekst (italic-30)</p>
</>

Oppsett font (utvikler)

Innhold

Oppsett

font-face

Next

Hvordan ta det i bruk?