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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |