Fontserver

This is an open source font server that hosts open source fonts. At the moment it is focused on hosting variable fonts.

Alvarado

By: Primary
Install Font

Add the following CSS in your document or stylesheet:

@font-face {
  font-family: Alvarado;
  src: url('https://www.goodgraphics.xyz/fonts/Alvarado/AlvaradoVar.ttf');
}

Use this CSS to target your element:

body {
  font-family: Alvarado;
  font-variation-settings: "ital" 50, "wght" 50;
}
Font Axes Min Max
ital 0 100
wght 0 100

Anybody

By: ETC
Install Font

Add the following CSS in your document or stylesheet:

@font-face {
  font-family: Anybody;
  src: url('https://www.goodgraphics.xyz/fonts/Anybody/Anybody[wdth,wght].ttf');
}

Use this CSS to target your element:

body {
  font-family: Anybody;
  font-variation-settings: "wdth" 125, "wght" 550;
}
Font Axes Min Max
wdth 50 150
wght 100 900

Epilogue

By: ETC
Install Font

Add the following CSS in your document or stylesheet:

@font-face {
  font-family: Epilogue;
  src: url('https://www.goodgraphics.xyz/fonts/Epilogue/Epilogue[wght].ttf');
}

Use this CSS to target your element:

body {
  font-family: Epilogue;
  font-variation-settings: "wght" 550;
}
Font Axes Min Max
wght 100 900

Fraunces

By: Undercase Type
Install Font

Add the following CSS in your document or stylesheet:

@font-face {
  font-family: Fraunces;
  src: url('https://www.goodgraphics.xyz/fonts/Fraunces/Fraunces[SOFT,WONK,opsz,wght].woff2');
}

Use this CSS to target your element:

body {
  font-family: Fraunces;
  font-variation-settings: "opsz" 81, "SOFT" 50, "wght" 550, "WONK" 0.5;
}
Font Axes Min Max
opsz 9 144
SOFT 0 100
wght 100 900
WONK 0 1

Gluten

By: ETC
Install Font

Add the following CSS in your document or stylesheet:

@font-face {
  font-family: Gluten;
  src: url('https://www.goodgraphics.xyz/fonts/Gluten/GlutenVariable.ttf');
}

Use this CSS to target your element:

body {
  font-family: Gluten;
  font-variation-settings: "ital" -0.5, "wght" 550;
}
Font Axes Min Max
ital -1 1
wght 100 900

Grandstander

By: ETC
Install Font

Add the following CSS in your document or stylesheet:

@font-face {
  font-family: Grandstanderwghtttf;
  src: url('https://www.goodgraphics.xyz/fonts/Grandstander/Grandstander[wght].ttf');
}

Use this CSS to target your element:

body {
  font-family: Grandstanderwghtttf;
  font-variation-settings: "wght" 550;
}
Font Axes Min Max
wght 100 900

Halibut

By: Collletttivo
Install Font

Add the following CSS in your document or stylesheet:

@font-face {
  font-family: Halibut-Variable;
  src: url('https://www.goodgraphics.xyz/fonts/Halibut/HalibutVF.ttf');
}

Use this CSS to target your element:

body {
  font-family: Halibut-Variable;
  font-variation-settings: "wdth" 140, "wght" 90;
}
Font Axes Min Max
wdth 40 200
wght 40 100

Happy Karrik

By: Primary
Install Font

Add the following CSS in your document or stylesheet:

@font-face {
  font-family: 'Happy Karrik Variable';
  src: url('https://www.goodgraphics.xyz/fonts/HappyKarrik/HappyKarrikVF.ttf');
}

Use this CSS to target your element:

body {
  font-family: 'Happy Karrik Variable';
  font-variation-settings: "ital" 50, "srif" 50;
}
Font Axes Min Max
ital 0 100
srif 0 100

Imbue

By: ETC
Install Font

Add the following CSS in your document or stylesheet:

@font-face {
  font-family: Imbue;
  src: url('https://www.goodgraphics.xyz/fonts/Imbue/Imbue[opsz,wght].ttf');
}

Use this CSS to target your element:

body {
  font-family: Imbue;
  font-variation-settings: "opsz" 60, "wght" 550;
}
Font Axes Min Max
opsz 10 100
wght 100 900

Montagu Slab

By: Florian Karsten Typefaces
Install Font

Add the following CSS in your document or stylesheet:

@font-face {
  font-family: Montagu Slab Variable;
  src: url('https://www.goodgraphics.xyz/fonts/MontaguSlab/MontaguSlab[opsz,wght].ttf');
}

Use this CSS to target your element:

body {
  font-family: Montagu Slab Variable;
  font-variation-settings: "opsz" 88, "wght" 450;
}
Font Axes Min Max
opsz 16 144
wght 100 700

Movement

By: Noel Pretorius and María Ramos
Install Font

Add the following CSS in your document or stylesheet:

@font-face {
  font-family: movement;
  src: url('https://www.goodgraphics.xyz/fonts/Movement/MovementV.ttf');
}

Use this CSS to target your element:

body {
  font-family: movement;
  font-variation-settings: "SPAC" 160, "wght" 550;
}
Font Axes Min Max
SPAC 100 120
wght 100 900

OC Highway VAR.2

By: Otherwhere Collective
Install Font

Add the following CSS in your document or stylesheet:

@font-face {
  font-family: OC Highway VAR2;
  src: url('https://www.goodgraphics.xyz/fonts/OCHighwayVAR2/OCHighwayVAR2VF.ttf');
}

Use this CSS to target your element:

body {
  font-family: OC Highway VAR2;
  font-variation-settings: "grad" -200, "oblq" 9, "wdth" 250;
}
Font Axes Min Max
grad -200 0
oblq 0 18
wdth 100 300

Sono

By: ETC
Install Font

Add the following CSS in your document or stylesheet:

@font-face {
  font-family: Sono;
  src: url('https://www.goodgraphics.xyz/fonts/Sono/Sono[MONO,wght].ttf');
}

Use this CSS to target your element:

body {
  font-family: Sono;
  font-variation-settings: "mono" 0.5, "wght" 600;
}
Font Axes Min Max
mono 0 1
wght 200 800

Space Grotesk

By: Florian Karsten Typefaces
Install Font

Add the following CSS in your document or stylesheet:

@font-face {
  font-family: Space Grotesk Variable;
  src: url('https://www.goodgraphics.xyz/fonts/SpaceGrotesk/SpaceGrotesk[wght].woff2');
}

Use this CSS to target your element:

body {
  font-family: Space Grotesk Variable;
  font-variation-settings: "wght" 650;
}
Font Axes Min Max
wght 300 700

Sprat

By: Collletttivo
Install Font

Add the following CSS in your document or stylesheet:

@font-face {
  font-family: Sprat Variable;
  src: url('https://www.goodgraphics.xyz/fonts/Sprat/Sprat-Variable.ttf');
}

Use this CSS to target your element:

body {
  font-family: Sprat Variable;
  font-variation-settings: "wdth" 200, "wght" 110;
}
Font Axes Min Max
wdth 100 200
wght 10 200

Tourney

By: ETC
Install Font

Add the following CSS in your document or stylesheet:

@font-face {
  font-family: Tourney;
  src: url('https://www.goodgraphics.xyz/fonts/Tourney/TourneyVariable.ttf');
}

Use this CSS to target your element:

body {
  font-family: Tourney;
  font-variation-settings: "ital" 0.5, "wdth" 300, "wght" 550;
}
Font Axes Min Max
ital 0 1
wdth 100 400
wght 100 900

Trispace

By: ETC
Install Font

Add the following CSS in your document or stylesheet:

@font-face {
  font-family: Trispace;
  src: url('https://www.goodgraphics.xyz/fonts/Trispace/Trispace[wdth,wght].ttf');
}

Use this CSS to target your element:

body {
  font-family: Trispace;
  font-variation-settings: "wdth" 137.5, "wght" 500;
}
Font Axes Min Max
wdth 75 125
wght 100 800