Geist Sans

font.css

:root {
  --font-path: 'https://unpkg.com/[email protected]/dist/fonts/geist-sans/';
}

@font-face {
  font-family: 'Geist';
  src: url(var(--font-path) 'Geist-Black.woff2') format('woff2'),
       url(var(--font-path) 'Geist-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'Geist';
  src: url(var(--font-path) 'Geist-Bold.woff2') format('woff2'),
       url(var(--font-path) 'Geist-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Geist';
  src: url(var(--font-path) 'Geist-Light.woff2') format('woff2'),
       url(var(--font-path) 'Geist-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Geist';
  src: url(var(--font-path) 'Geist-Medium.woff2') format('woff2'),
       url(var(--font-path) 'Geist-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Geist';
  src: url(var(--font-path) 'Geist-Regular.woff2') format('woff2'),
       url(var(--font-path) 'Geist-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Geist';
  src: url(var(--font-path) 'Geist-SemiBold.woff2') format('woff2'),
       url(var(--font-path) 'Geist-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Geist';
  src: url(var(--font-path) 'Geist-Thin.woff2') format('woff2'),
       url(var(--font-path) 'Geist-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'Geist';
  src: url(var(--font-path) 'Geist-UltraBlack.woff2') format('woff2'),
       url(var(--font-path) 'Geist-UltraBlack.ttf') format('truetype');
  font-weight: 950;
  font-style: normal;
}

@font-face {
  font-family: 'Geist';
  src: url(var(--font-path) 'Geist-UltraLight.woff2') format('woff2'),
       url(var(--font-path) 'Geist-UltraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: 'Geist';
  src: url(var(--font-path) 'Geist-Variable.woff2') format('woff2'),
       url(var(--font-path) 'Geist-Variable.ttf') format('truetype');
  font-weight: 100 900; /* The variable font supports a range of weights */
  font-style: normal;
}

/* Usage example */
body {
  font-family: 'Geist', sans-serif !important;
}

h1 {
  font-weight: 900; /* UltraBlack */
}

h2 {
  font-weight: 700; /* Bold */
}

p {
  font-weight: 400; /* Regular */
}

.light-text {
  font-weight: 300; /* Light */
}

.medium-text {
  font-weight: 500; /* Medium */
}

.semi-bold-text {
  font-weight: 600; /* SemiBold */
}

.thin-text {
  font-weight: 100; /* Thin */
}

.ultra-light-text {
  font-weight: 200; /* UltraLight */
}