Font

Oslo kommune har utviklet en egen skrifttype - Oslo Sans. Oslo Sans skal benyttes i all kommunikasjon fra Oslo kommune. Punkt bruker Oslo Sans.

Oslo sans kommer i fire ulike vekter: Light (300), Regular (400), Medium (500) og Bold (700).

Oslo Sans er tilgjengelig i filformatene woff og woff2. Vi anbefaler at du bruker Oslo Sans gjennom Punkts stilsett, men om du ønsker å laste ned fontene direkte kan du gjøre det via CDN.

SkrifttypeLenke til CDN
OsloSans BoldOsloSans-Bold.woff
OsloSans-Bold.woff2
OsloSans LightOsloSans-Light.woff
OsloSans-Light.woff2
OsloSans MediumOsloSans-Medium.woff
OsloSans-Medium.woff2
OsloSans RegularOsloSans-Regular.woff
OsloSans-Regular.woff2
OsloSans Regular ItalicOsloSans-RegularItalic.woff
OsloSans-RegularItalic.woff2

NB! Om du ønsker å låse til versjon bytter du ut latest med ønsket versjon.

Eksempel på bruk i kode

Om du ønsker å ta i bruk fontene via NPM anbefaler vi å lese mer om Installasjon for å få en grundigere innføring av de ulike delene.

@font-face {
  font-display: swap;
  font-family: Oslo Sans;
  font-style: normal;
  font-weight: 400;
  src:
    url(https://punkt-cdn.oslo.kommune.no/latest/fonts/OsloSans-Regular.woff2)
      format("woff2"),
    url(https://punkt-cdn.oslo.kommune.no/latest/fonts/OsloSans-Regular.woff)
      format("woff");
}

@font-face {
  font-display: swap;
  font-family: Oslo Sans;
  font-style: italic;
  font-weight: 400;
  src:
    url(https://punkt-cdn.oslo.kommune.no/latest/fonts/OsloSans-RegularItalic.woff2)
      format("woff2"),
    url(https://punkt-cdn.oslo.kommune.no/latest/fonts/OsloSans-RegularItalic.woff)
      format("woff");
}

@font-face {
  font-display: swap;
  font-family: Oslo Sans;
  font-style: normal;
  font-weight: 300;
  src:
    url(https://punkt-cdn.oslo.kommune.no/latest/fonts/OsloSans-Light.woff2)
      format("woff2"),
    url(https://punkt-cdn.oslo.kommune.no/latest/fonts/OsloSans-Light.woff)
      format("woff");
}

@font-face {
  font-display: swap;
  font-family: Oslo Sans;
  font-style: normal;
  font-weight: 500;
  src:
    url(https://punkt-cdn.oslo.kommune.no/latest/fonts/OsloSans-Medium.woff2)
      format("woff2"),
    url(https://punkt-cdn.oslo.kommune.no/latest/fonts/OsloSans-Medium.woff)
      format("woff");
}

@font-face {
  font-display: swap;
  font-family: Oslo Sans;
  font-style: normal;
  font-weight: 700;
  src:
    url(https://punkt-cdn.oslo.kommune.no/latest/fonts/OsloSans-Bold.woff2)
      format("woff2"),
    url(https://punkt-cdn.oslo.kommune.no/latest/fonts/OsloSans-Bold.woff)
      format("woff");
}

body {
  color: #2a2859;
  font-family: "Oslo Sans", arial, sans-serif;
  font-size: 1rem;
  font-weight: 300;
  letter-spacing: normal;
  line-height: 1.5em;
}